Skip to main content


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

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Adding plug-ins to a rich text editor

Updated on May 3, 2020

A rich text editor (RTE) allows users of your application to add and edit rich text within a web browser. Developers can add plug-ins to a rich text editor (pxRichTextEditor) to enable functionality that is not included in the default rich text editor. Such plug-ins might include spelling or grammar checkers, auto-correct, or code formatting functionality.

The rich text editor uses CKEditor, which has a plugin-based architecture. To add a plugin, you might need to acquire the plug-in license for use in production systems. Modify your application's CKEditor configuration by overriding the customRTEPlugins javascript object.

To add a plugin to the RTE, the new plug-in should be pushed into the plug-in map: pega.u.d.customRTEPlugins.

In the code below, MyCustomPlugin is the name of the plugin. A plugin definition needs to be pushed into the map associated with the name of the plugin.

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", {
      exec: function(editor) {
        alert("HELLO!");
      }
    });
    editor.addCommand("cmdSayBye", {
      exec: function(editor) {
        alert("BYE!");
      }
    });
    editor.ui.addButton("SayHello", {
      label: "Say Hello",
      command: "cmdSayHello",
      icon: "webwb/pztick.png"
    });
    editor.ui.addButton("SayBye", {
      label: "Say Bye",
      command: "cmdSayBye",
      icon: "webwb/pzcross.png"
    });
  },
  buttons: ["SayHello", "SayBye"]
};

The plugin definition should contain a method called init, which gets called on plugin initialization. Inside of this method, commands and buttons can be added.

A command is a named operation to be performed. The editor instance is available as the parameter to the command’s exec method. Any of the editor API or other arbitrary JavaScript code can be executed from within the command’s exec method.

A button is a toolbar component. Each button needs to be associated with a command. When the button is clicked, the associated command exec method is called.

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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