How do I add CKEditor extra plugin? I need installation steps

Question

I cannot seem to find a simple tutorial that explains how to add CKEditor extra plugin.

Answer 1

Below are steps on how to add CKEditor extra plugin using either FTP or cPanel. 

CKEditor 4 extra plugin installation steps

• Step 1: Go to ckeditor.com >Add-ons>Download 
• Step 2: Once you have clicked Download on the plugin you want, a pop-up will appear with Add-on installation instructions and a zip file of the plugin will  automatically download
• Step 3: Go to your web hosting file manager and locate CKEditor folder> then Plugins folder
• Step 4: Extract the zip file to the Plugins folder
• Step 5: Go to the pop-up that appeared in Step 2 and copy the configuration provided. 

For example config.extraPlugins = 'codesnippet';

• Step 6: Go back to the CKEditor folder then open the config.js file
• Step 7: Paste the code you copied in Step 5 to config.js, before "};" 
• Step 8: While still at config.js add the name of the extra plugin that you installed for example codesnippet to any of the lines as illustrated below in Original and modified.

Original: { name: 'last', items: [ 'Undo', 'Redo', 'RemoveFormat', 'Maximize' ] }

Modified: { name: 'last', items: [ 'Undo', 'Redo', 'RemoveFormat', 'codesnippet', 'Maximize' ] }

•  Save or update the file.  

NOTE: While you were downloading the plugin there is a pop-up page that appeared (in step 2). You should check below it to see if there were any Add-on dependencies needed for the plugin to work. If there were, you also need to install them for the extra plugin to work. 

 If the above steps did not work and your CKEditor broke, you can remove everything that you added.

 Let us know if there is anything that you did not understand in the installation process .