# Adding an external plug-in to the Rich text editor

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.

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.
Prepare the plug-in:
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.

To use a subdirectory on the application server, enter 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.

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.

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 plug-in reference 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.