Symfony FOSCKEditorBundle - how to add extra plugin

If you've been installed CKEditor through FOSCKEditorBundle Symfony bundle, you might have noticed that this bundle has it's own fos_ck_editor.yaml configuration, which looks something like this:

            toolbar: [ ["Source", "-", "Save"], "/", ["Anchor"], "/", ["Maximize"] ]
            uiColor:                "#000000"
            filebrowserUploadRoute: "my_route"
            extraPlugins:           "wordcount"
            # ...

You can see that there is extraPLugins setting, which literally means that you can add coma separated names of plugins and use them in CKEditor toolbar. 

However, when I tried to do it, I soon realized that the standard ckeditor installation through npm or yarn doesn't contain all of the possible plugins. I wanted to install different image upload plugin, Enhanced Image(or image2) plugin.

I followed the instructions and downloaded the zip containg image2 plugin.

Then because I was using Symfony's webpack encore bundle, I needed to first to make sure image2 plugin files go to public asset directory. I have copied them to /assets/ckeditor/ and then I added a configuration entry for it to webpack.config.js :

// ckeditor Enhanced Image Plugin
    from: './assets/ckeditor',
    to: 'ckeditor/extra-plugins/[path][name].[ext]'

This means that plugin code gets copied to BUILD_FOLDER/ckeditor/extra-plugins/* when we run a typical encore build command: 

$ yarn encore dev

Next thing needed was to add information about the new config to fos_ck_editor.yaml:

    path: "/build/ckeditor/extra-plugins/image2/"
    filename: "plugin.js"

And 2 more lines: first to add extra plugin, which we defined above and another line to remove default 'image' plugin to avoid plugin conflict like this: Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "image2"}

extraPlugins: 'image2'
removePlugins: 'image'

And that's it. After page refresh we can see that the image upload icon in the toolbar is the same and only when we click on it the image tool looks differently.

You can visit the following Symfony documentation pages to see how to install and configure FOSCKEditor bundle and add extra plugins:

FOSCKEditorBundle docs  and  How to add plugins to FOSCKEditorBundle