LinkedIn
Copied!

Table of Contents

Adding an external plug-in to the Rich text editor

Version:

Only available versions of this content are shown in the dropdown

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.

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 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.

      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

  6. Create a text file that contains the text of each resource that the plugin.js file references by repeating steps 1 through 2.

  7. Upload each image that the plugin.js file references by performing the following actions:

    1. In the header of Dev Studio, click Create Technical Binary 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.

      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.

  8. Align the plug-in with Pega Platform

  9. In the plug-in file that you created in 1, ensure that all references to resources point to resource locations in Pega Platform.

    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"
  10. In the plug-in text, replace the original add plug-in with pega.u.d.customRTEPlugins.

    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
    }
  11. Save the plug-in.

    For more information on formatting plug-ins in Pega Platform, you can study the code of the out-of-the-box plug-ins.
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.
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.