Skip to main content

 –

Creating a new plug-in for the Rich text editor

Suggest edit Updated on July 21, 2021

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.

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.
Did you find this content helpful? YesNo

0% found this useful

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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