How do I add or remove plugins in CKEditor without rebuilding?

Question

I've just started using CKEditor 4 (having previously used version 1 a long time ago). I like that I can build it online and download it, but when I do that, I then use the toolbar config tool to set up my toolbar.

What happens if I want to add or remove a specific plugin in future though? Will I have to build a completely new CKEditor using the build tool, then download it to replace the existing one, and then reconfigure my toolbar? I don't really want to have to reconfig the toolbar each time.

There are a couple of plugins that I might want to use later, so I'm just trying to figure out whether I need to include them now, or can I add them in with no hassle later on?

Answer 1

Remove plugin

Removing is quite easy. CKEditor provide configuration option where you can define plugins to be remove. https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-removePlugins E.g.

CKEDITOR.replace( 'editor', {
  removePlugins: 'basicstyles,justify'
} );

You need to remember that, removing plugins might break dependancies. E.g. you wish to remove clipboard plugin, but you want to load pastefromword plugin. Paste from Word requires clipboard for proper work, removing clipboard will break loading this plugin. Adequate error will be thrown in the console.

Plugin option

Alternative solution is to define plugins which you wish to load in editor. You need to use plugin option in configuration https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-plugins. This will only load defined plugins together with its dependancies. E.g. In case like above, when you define pastefromword plugin to be loaded, this will also load clipboard plugin.

Adding plugin

There is configuration option for loading extra plugins. Where you can define names of plugins to be loaded: https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-extraPlugins. Here situation is a little bit more complicated because plugin needs to be available for the editor. When you wish to load plugin you need to make 2 things:

1. Load plugin (more detail description is below)
2. Add plugin for editor instance, with extraPlugins configuration option.

There might be situation that you have few editors on one page and every of editor will have different available plugins. In such case all plugins will be loaded, but no all will be used in specific editor instance.

Define plugin inline in code

If you wrote your own plugin you might want to define it directly in JS. You just need to take care to be defined before initialisation of the editor. https://codepen.io/msamsel/pen/NwGJYL

CKEDITOR.plugins.add( 'testplugin', {
  init: function( editor ) {
    console.log( 'plugin loaded' );
    // adding more logic
  }
} )

CKEDITOR.replace( 'editor', {
  extraPlugins: 'testplugin'
} );

Load plugin from local resources

If you wish to load plugin which you download/create separately, you can create proper folder structure together with CKEditor. Such added plugins will be available and possible to add through extraPlugins.

ckeditor root/
    plugins/
        <plugin name>/
            icons/
                <plugin name>.png
            dialogs/
                <dialog file>.js
            plugin.js

A little bit more you can find at the beginning of tutorial for creating plugins: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/plugin_sdk_sample_1

Load plugin from external resources

Plugin might be also loaded form external sources through this method https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.resourceManager-method-addExternal E.g.

CKEDITOR.plugins.addExternal( 'timestamp', 'https://sdk.ckeditor.com/samples/assets/plugins/timestamp/', 'plugin.js' );

CKEDITOR.replace( 'editor1', {
    extraPlugins: 'timestamp'
} );