Support Article
Unable to install CKEditor add-on
SA-50346
Summary
When uploading the plugin files as a JavaScript (JS) file and including the JS file in the harness where CKEditor is loaded, unable to install the CKEditor Add-on. This occurs despite setting config.extraPlugins = 'scayt'; variable in webwb.pzpega_ckeditor.js rule in the Pega-Gadgets:07-10-28 ruleset. Pega-Gadgets:07-10-28 is Final.
Error Messages
Not Applicable
Steps to Reproduce
- Download the Add-on from the CKEditor website.
- Extract the plugin .zip in to the plugins folder.
- Install the Spell Check As You Type CKEditor Add-On.
- Update the variable: config.extraPlugins = 'scayt';
Root Cause
Not Applicable
Resolution
Perform the following local-change to add new plugins to the Rich Text Editor (RTE): Push the new plugin to the pega.u.d.customRTEPlugins plugin map.
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", {
exec: function(editor) {
alert("HELLO!");
}
});
editor.addCommand("cmdSayBye", {
exec: function(editor) {
alert("BYE!");
}
});
editor.ui.addButton("SayHello", {
label: "Say Hello",
command: "cmdSayHello",
icon: "webwb/pztick.png"
});
editor.ui.addButton("SayBye", {
label: "Say Bye",
command: "cmdSayBye",
icon: "webwb/pzcross.png"
});
},
buttons: ["SayHello", "SayBye"]
};
In the above code, the plugin name is MyCustomPlugin. A plugin definition must be pushed to the map associated with the name of the plugin. The plugin definition must contain an 'init' method which is invoked on plugin initialization. Add the commands and buttons in this method.
A command is a named operation to be performed. The editor instance is available as the parameter to the command's exec method. Any of the editor APIs (CKEditor 4 Documentation) and other arbitrary JS code can be executed from the command's exec method.
A button is a toolbar component. Each button must be associated with a command. On clicking the button the associated command's Exec method is invoked.
Perform the following local-change to enable native spellcheck for Rich Text Editor (RTE):
Include the below script in the UserWorkForm:
if(CKEDITOR){
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor;
editor.document.$.body.setAttribute('spellcheck',true);
});
}
Published September 28, 2018 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.