symfony - WebPack Encore 中缺少带有 CKEditor 的工具栏项目

Question

我有一个带有 CKEditor 的 Symfony 表单(与 Composer ("friendsofsymfony/ckeditor-bundle": "^2.2") 一起安装)并使用我的自定义工具栏对其进行配置。

它完全可以工作，但我正在尝试将所有内容切换到 WebpackEncore，它实际上可以工作，但我有一个奇怪的问题。

我的 fos-ckeditor.yml 在 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

我使用 WebpackEncore 的新配置与添加此行相同

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

当我对前面的 3 行配置进行评论时，工具栏显示正确，但不再使用 WebpackEncore。 看来 WebpackEncore 构建工具栏的方式与 ckeditor 不同，因为输出 HTML 不具有相同的结构...

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

我遵循 Symfony's installation documentation 中的所有说明和 Symfony's customize toolbar's documentation

我不明白差异从何而来...谢谢您的帮助

Answer 1

当您安装 ckeditor4 时，您将安装其标准版本。
您可以通过修改文件 fos_ckeditor.yaml

来更改默认行为

例如，默认情况下，您有以下conf (build/ckeditor/config.js):
config.removeButtons = '下划线,下标,上标';

如果您想使用这些按钮，可以在 fos_ckeditor.yaml 文件中添加选项 removeButtons

fos_ck_editor:
    configs:
        nameOfYourConfig:
            removeButtons: ~

您还可以使用extraPlugins添加插件:

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

通过justify插件，您将能够使用JustifyLeft、JustifyCenter、JustifyRight、>JustifyBlock 在工具栏中(默认情况下不可能)。

您将在下面找到选项列表
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html