CKEditor Config - How to install 1 additional plugin manually after already using the Builder to Automatically build

Question

I used the Builder to automatically build a CKEditor 4.7. I see the a build-config.js with contents starting like:

var CKBUILDER_CONFIG = { ...

I now want to install a plugin called "bootstrapGrid", manually. I added this to my config.js:

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'panelbutton,floatpanel,bootstrapGrid';
    config.contentsCss = 
     'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.mj_variables_bootstrap_css_path = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css';
    config.allowedContent = true;
    config.bootstrapGrid_container_large_desktop = 1170;
    config.bootstrapGrid_container_desktop = 970;
    config.bootstrapGrid_container_tablet = 750;
    config.bootstrapGrid_grid_columns = 12;

    config.toolbar = [
        { name: 'insert', items: [ 'BootstrapGrid', 'BootstrapGridAdd', 
         'BootstrapGridDelete', 'BootstrapGridSettings', 'Source' ] }
    ];
}; 

For some reason ONLY the toolbar for the bootstrapGrid plugin is shown and all the other tool bars disappear. How can I 'add an extra plugin' instead of overriding my initial CKEditor plugins?

Answer 1

When you use config.toolbar you override your default toolbar. So, if you want to modify your toolbar, go to samples folder inside your CKEditor installation and open index.html. Then, hit TOOLBAR CONFIGURATOR button, rearrange visually your toolbar and finally hit Advanced to get the config.toolbar that you've made. After that, you can paste it in your webpage and change it as you wish (add more buttons from other plugins etc.)

The online version for toolbar configurator (currently for v4.8, but should work just fine for v4.7) is here: https://ckeditor.com/latest/samples/toolbarconfigurator/#basic

More info: https://docs.ckeditor.com/ckeditor4/docs/?mobile=/guide/dev_toolbar