Skip to main content


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

Adding an external plug-in to the Rich text editor

Updated on December 13, 2022

Provide your users with tools to perform complex operations in the Rich text editor control by adding external plug-ins. For example, you can install a plug-in that supports mathematical notation to improve the usefulness of the Rich text editor for scientific audiences.

Note: The Rich text editor tool is based on CKEditor, but does not support all CKEditor plugins. The following factors might cause the plug-in to fail:
  • The plug-in is not initialized when the CKEditor core and base features are initialized.
  • The plug-in references CKEditor outside the initialization function.
Before you begin: Prepare the plug-in:
  1. Download and unzip the plug-in folder.
  2. Check the plugin.js file for dependencies, such as other plug-ins, and then download the dependencies.
  3. If your plug-in has other plug-ins as dependencies, download and unzip the folders for those plug-ins.

    Create a plug-in file in Pega Platform

  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.For example: webwb.
    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 from the plugin.js file.
  4. Click Save.

    5. Add plug-in resources

  5. Create a text file that contains the text of each resource that the plugin.js file references by repeating steps 1 through 2.
  6. Upload each image that the plugin.js file references by performing the following actions:
    1. In the header of Dev Studio, click CreateTechnicalBinary File.
    2. In the Label field, enter a meaningful name for the file.
    3. In the App Name (directory) field, enter the name of the server directory in which you want to place the file.For example: webwb.
    4. In the File Type (extension) field, enter the file type of your image.
    5. In the Context section, define the development branch and ruleset for the file.
    6. Click Create and open.
    7. In the File controls section, click Upload file.
    8. In the Upload file dialog box, click Choose file, and then select the file for the upload.
    9. Click Upload file, and then, in the file tab, click Save.

    7. Align the plug-in with Pega Platform

  7. In the plug-in file that you created in 1, ensure that all references to resources point to resource locations in Pega Platform.For example: The following code represents a file reference in the original plug-in:
    icon: "icons/mathjax.png"
    Replace it in the following manner:
    icon: "webwb/mathjax.png"
  8. In the plug-in text, replace the original add plug-in with pega.u.d.customRTEPlugins.For example: The following code represents a sample code that launches the plug-in:

    CKEDITOR.plugins.add( "mathjax", {
                        //Plug-in code
                        }
    Replace it in the following manner:

    pega.u.d.customRTEPlugins["mathjax"] = {
//plugin code
}
  9. Save the plug-in.
    Tip: For more information on formatting plug-ins in Pega Platform, you can study the code of the out-of-the-box plug-ins.
What to do next: Attach the text file with the plug-in 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