Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Plugin] Adding a recipe for Webpack Encore plugin usage #194

Open
Guikingone opened this issue Jul 29, 2019 · 0 comments
Open

[Plugin] Adding a recipe for Webpack Encore plugin usage #194

Guikingone opened this issue Jul 29, 2019 · 0 comments

Comments

@Guikingone
Copy link

Guikingone commented Jul 29, 2019

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 ? 馃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant