Adding a custom plug-in to the Rich text editor

Add new functionalities to a Rich text editor control by installing custom plug-ins. For example, you can add an auto-correct option to the Rich text editor toolbar, to improve the user experience.

Creating a text file that holds the plugin code

In the header of Dev Studio, click Create > Technical > Text File.
On the New tab, define the text file record configuration and context:
1. In the Label field, enter a meaningful name for the file.
2. In the App Name (directory) field, enter the name of the server directory in which you want to place the file.
3. In the File Type (extension) field, enter js.
4. In the Context section, define the development branch and ruleset for the file.
5. Click Create and open.

In the text field, enter the plugin code.

For example: This code example adds an icon to the Rich text editor toolbar that displays "Hello" when the user clicks it.

pega.u.d.customRTEPlugins = pega.u.d.customRTEPlugins || {}; /* Initialize the map if not initialized already. */

pega.u.d.customRTEPlugins["MyCustomPlugin"] = {

        init: function(editor) {

                editor.addCommand("cmdSayHello", { /* Plugin code */

                        exec: function(editor) {

                                alert("HELLO!");

                        }

                });
             
                editor.ui.addButton("SayHello", {

                        label: "Say Hello",

                        command: "cmdSayHello",

                        icon: "webwb/pztick.png"

                }); /* Add plugin launch icon to the RTE toolbar */
               
        },

        buttons: ["SayHello"]

};

Click Save.

Adding the plugin to the harness

Search for and open the harness that hosts the Rich text editor control to which you want to add the plugin.
On the Scripts & styles tab, in the Scripts section, click the Add a row icon.
In the Type field of the new row, select js.
In the Name field, select the text file with the plugin.
Click Save.