[Plugin] Adding a recipe for Webpack Encore plugin usage

[Guillaume Loulier]

Hi everyone 👋

Small suggestion about the documentation, what about adding a "recipe" about using Encore in order to install a plugin ? 🤔

Small example:

Plugin support
==============

The bundle offers you the ability to manage extra plugins. To understand how it
works, you will enable the `Wordcount`_ plugin for our CKEditor widget.

Install the Plugin
------------------

First, you need to download and extract it in the web directory. For that, you
have two possibilities:

#. Directly put the plugin in the web directory (``/web/ckeditor/plugins/`` for
   example).
#. Put the plugin in the ``/Resources/public/`` directory of any of your bundles.

Install the Plugin (Encore approach)
------------------------------------

First, you need to download and extract it in the ``assets`` directory (using a ``ckeditor`` subdirectory can be useful) then you should update the `webpack.config.js`: 

.. code-block:: javascript 

    .copyFiles([
        {
            from: './node_modules/ckeditor/',
            to: 'ckeditor/[path][name].[ext]',
            pattern: /\.(js|css)$/,
            includeSubdirectories: false
        },
        {from: './node_modules/ckeditor/adapters', to: 'ckeditor/adapters/[path][name].[ext]'},
        {from: './node_modules/ckeditor/lang', to: 'ckeditor/lang/[path][name].[ext]'},
        {from: './node_modules/ckeditor/plugins', to: 'ckeditor/plugins/[path][name].[ext]'},
        {from: './node_modules/ckeditor/skins', to: 'ckeditor/skins/[path][name].[ext]'},

        // This line allows us to retrive the plugin files in the ``public/dist/ckeditor/plugins`` directory
        {from: './assets/ckeditor/plugins', to: 'ckeditor/plugins/[path][name]'},
    ])

Register the Plugin
-------------------

In order to load it, you need to specify its location. For that, you can do it
globally in your configuration:

.. code-block:: yaml

    # app/config/config.yml
    fos_ck_editor:
        default_config: my_config
        configs:
            my_config:
                extraPlugins: "wordcount"
        plugins:
            wordcount:
                path:     "/bundles/mybundle/wordcount/" # with trailing slash (if using Encore approach, consider using `dist/ckeditor/plugins/pluginName/`
                filename: "plugin.js"

Or you can do it in your widget:

.. code-block:: php

    $builder->add('field', 'ckeditor', array(
        'config' => array(
            'extraPlugins' => 'wordcount',
        ),
        'plugins' => array(
            'wordcount' => array(
                'path'     => '/bundles/mybundle/wordcount/', // with trailing slash
                'filename' => 'plugin.js',
            ),
        ),
    ));

Plugin dependency
-----------------

Once your plugin is installed and registered, you will also need to install and
register these dependencies. Hopefully, the ``wordcount`` has no extra dependency
but other plugin can require extra ones. So if it is the case, you need to redo
the process for them and so on.

Plugin icon
-----------

If you don't configure a built-in toolbar or a custom toolbar, the plugin icon
should be visible automatically according to the plugin configuration otherwise,
it is your responsibility to configure it. Take a look to this
:doc:`documentation <toolbar>`.

.. _`Wordcount`: http://ckeditor.com/addon/wordcount

Any thoughts ? 🤔