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.