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: To use a subdirectory on the application server, enter 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.
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 plug-in reference 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 new plug-in for the Rich text editor Next topic Paragraphs