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 plug-in is not initialized when the CKEditor core and base features are initialized.
- The plug-in references CKEditor outside the initialization function.
- Download and unzip the plug-in folder.
- Check the
plugin.js
file for dependencies, such as other plug-ins, and then download the dependencies. - If your plug-in has other plug-ins as dependencies, download and unzip the folders for those plug-ins.
- In the header of Dev Studio, click .
- On the New tab, define the text file record
configuration and context:
- In the Label field, enter a meaningful name for the file.
- In the App Name (directory) field, enter the
name of the server directory in which you want to place the file.
For example: webwb. - In the File Type (extension) field, enter js.
- In the Context section, define the development branch and ruleset for the file.
- Click Create and open.
- In the text field, enter the plugin code from the
plugin.js
file. - Click Save.
- Create a text file that contains the text of each resource that the
plugin.js
file references by repeating steps 1 through 2. - Upload each image that the
plugin.js
file references by performing the following actions:- In the header of Dev Studio, click .
- In the Label field, enter a meaningful name for the file.
- In the App Name (directory) field, enter the
name of the server directory in which you want to place the file.
For example: webwb. - In the File Type (extension) field, enter the file type of your image.
- In the Context section, define the development branch and ruleset for the file.
- Click Create and open.
- In the File controls section, click Upload file.
- In the Upload file dialog box, click Choose file, and then select the file for the upload.
- Click Upload file, and then, in the file tab, click Save.
- 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: Replace it in the following manner:icon: "icons/mathjax.png"
icon: "webwb/mathjax.png"
- 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: Replace it in the following manner:CKEDITOR.plugins.add( "mathjax", { //Plug-in code }
pega.u.d.customRTEPlugins["mathjax"] = { //plugin code }
- 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.
Create a plug-in file in Pega Platform
Add plug-in resources
Align the plug-in with Pega Platform
Previous topic Creating a custom plug-in for the Rich text editor Next topic Spell checker