Table of Contents

Creating a custom plug-in for the Rich text editor


Only available versions of this content are shown in the dropdown
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 Create Technical Text 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.

    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) {
                    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?

Have a question? Get answers now.

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