Missing Toolbars items with CKEditor in WebPack Encore - symfony

Question

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

Answer 1

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

Answer 2

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:
start removing the npm package
yarn remove ckeditor
or ckeditor4
Create your own ckeditor: CK editor builder
After this copy paste your build to
assets/ckeditor/build
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.

Answer 3

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