Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Creating a custom plug-in for the Rich text editor

Updated on December 13, 2022
Applicable to Theme Cosmos applications

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

  1. In the header of Dev Studio, click CreateTechnicalText File.
  2. 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.
  3. 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"]

};
  4. Click Save.
What to do next: Attach the text file with the plugin to the harness that hosts the Rich text editor. For more information, see Adding scripts and style sheets to a harness.

Tags

Pega Platform 8.6 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us