Missing Toolbars items with CKEditor in WebPack Encore

user_11356321 0
Viewed 1552

I have an Symfony form with CKEditor (installed with composer ("friendsofsymfony/ckeditor-bundle": "^2.2")) and configure it with my custom toolbar.

It's fully worked but i'm trying to switch everything to WebpackEncore, it's actually works but I have an weird problem.

My fos-ckeditor.yml totally works before WebpackEncore

# Read the documentation: https://symfony.com/doc/current/bundles/FOSCKEditorBundle/index.html

twig:
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

fos_ck_editor:
    input_sync: true
    default_config: main_config
    configs:
        main_config:
            toolbar: "article_toolbar"
    toolbars:
        configs:
            article_toolbar: [ "@document", "@clipboard", "@editing", "@tools", "/", "@basicstyles", "@paragraph", "@links", "@insert", "/", "@styles", "@colors" ]
        items:
            document: [ 'Source', '-', 'Preview', '-' ]
            clipboard: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]
            editing: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ]
            tools: [ 'Maximize', 'ShowBlocks' ]
            basicstyles: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ]
            paragraph: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-' ]
            links: [ 'Link', 'Unlink', 'Anchor' ]
            insert: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar' ]
            styles: [ 'Styles', 'Format', 'Font', 'FontSize' ]
            colors: [ 'TextColor', 'BGColor' ]
    #filebrowserUploadRoute: "my_route"
    #extraPlugins:           "wordcount"

Result without WebpackEncore

My new config with WebpackEncore are the same with add this lines

fos_ck_editor:
    # ...
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"
    jquery_path: "build/ckeditor/adapters/jquery.js"

When I comment on these 3 previous config lines, the toolbar is displayed correctly but WebpackEncore are no longer used. It seems that WebpackEncore builds the toolbar differently from ckeditor because output HTML doesn't have same structure...

Webpack.config.js

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

Result with WebpackEncore

I followed all instructions in Symfony's installation documentation and Symfony's customize toolbar's documentation

I don't understand where the difference come from... Thank you for your help

ckeditor4.x webpack-encore symfony4 symfony ckeditor
3 Answers

When you install ckeditor4, you install its standard version.
You can change the default behavior by modifying the file fos_ckeditor.yaml

For example, by default, you have the following conf (build/ckeditor/config.js) :
config.removeButtons = 'Underline,Subscript,Superscript';

If you want to use these buttons, you can add in the fos_ckeditor.yaml file the option removeButtons

fos_ck_editor:
    configs:
        nameOfYourConfig:
            removeButtons: ~

You can also add plugins with extraPlugins:

fos_ck_editor:
    configs:
        nameOfYourConfig:
            removeButtons: ~
            extraPlugins: 'justify'

With the justify plugin, you will be able to use JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock in your toolbar (not possible by default).

You will find below the list of options
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

user_147805620

I think there is a conflict with the npm package & encore.

I had the same problem and I have found a dirty solution. It’s not a perfect solution but I have a complete toolbar with encore:

  1. start removing the npm package

    yarn remove ckeditor

    or ckeditor4

  2. Create your own ckeditor: CK editor builder

  3. After this copy paste your build to

    assets/ckeditor/build

  4. in your webpack.js.config remove other ckeditors imports line and only use:

    {from: './assets/ckeditor/build', to: 'ckeditor/[path][name].[ext]'},

    and in your fos_ckeditor :

    fos_ck_editor:
    base_path: "build/ckeditor"
    js_path:   "build/ckeditor/ckeditor.js"

For me it worked.

user_82042220

I encountered the same issue today and this happens because NPM installs the standard-all edition of ckeditor by default. But FOSCKEditor download the full edition when using the command line.

So if you want to manage ckeditor with Webpack Encore, you also need to install the full edition using NPM:

npm install ckeditor/ckeditor4-releases#full/stable

See: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_package_managers.html#usage

user_14892640
Related