Creating a custom plug-in for the Rich text editor
Add new functionalities to a Rich text editor control by installing custom plug-ins. For example, you can add a code formatting option to the Rich text editor toolbar, to improve the user experience.
- 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.
- 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.
For example: This code example adds an icon to the Rich text editor toolbar that displays "Hello" when the user clicks it. pega.u.d.customRTEPlugins = pega.u.d.customRTEPlugins || {}; /* Initialize the map if not initialized already. */ pega.u.d.customRTEPlugins["MyCustomPlugin"] = { init: function(editor) { editor.addCommand("cmdSayHello", { /* Plugin code */ exec: function(editor) { alert("HELLO!"); } }); editor.ui.addButton("SayHello", { label: "Say Hello", command: "cmdSayHello", icon: "webwb/pztick.png" }); /* Add plugin launch icon to the RTE toolbar */ }, buttons: ["SayHello"] }; - Click Save.
Previous topic Configuring a Rich text editor control Next topic Adding an external plug-in to the Rich text editor