Install N1ED plugin for CKEditor
The best way to enable Bootstrap (styles, grid, blocks and widgets) in your editor is to install N1ED plugin for CKEditor. The file manager, image editor and other handy tools are also included in this add-on.
Note: the latest free version of CKEditor is 4.22 due to the end-of-life they announced.
Starting from CKEditor 4.23, it is available under commercial terms, and is no longer available for free.
N1ED works with any version, but CKEditor 4.22 can work without a CKEditor license key (for free).
Unpack
Unpack the archive with the plugin into the CKEditor plugins/
folder:
ckeditor/
plugins/
N1ED-editor/
plugin.js
skins/
n1theme/
...
Download CKEditor 4 of the latest free version (4.22) if you are starting from scratch.
Bonus: See the SAMPLES
folder to instanly run N1ED and inspect the example code.
Enable Plugin
Enable the N1ED add-on in the config:
CKEDITOR.editorConfig = function(config) {
config.extraPlugins = "N1ED-editor";
config.skin = "n1theme"; // N1ED's own theme for CKEditor
config.removePlugins = "iframe,magicline"; // N1ED has better support of this
// Get your own key then
config.apiKey = "N1ED24RR1234123412341234";
}
Please avoid using spaces in extraPlugins
if you have another plugins enabled. Use comma only as a separator.
The N1ED plugin is fully functional after this step. Next, you will need to link your file storage by installing the file manager backend on your server.
Install backend
Now you need to install the file manager server-side script on your server to enable file manager functionalities in your editor. Follow the instructions provided in the link to complete the setup.