WebPack Encore 中缺少带有 CKEditor 的工具栏项目答案

【问题标题】：Missing Toolbars items with CKEditor in WebPack EncoreWebPack Encore 中缺少带有 CKEditor 的工具栏项目
【发布时间】：2020-09-25 17:42:58
【问题描述】：

我有一个带有 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 中的所有说明

我不明白差异来自哪里...谢谢您的帮助

【问题讨论】：

标签： symfony ckeditor symfony4 ckeditor4.x webpack-encore

【解决方案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

【讨论】：

【解决方案2】：

我认为与 npm 包 & encore 有冲突。

我遇到了同样的问题，但我找到了一个肮脏的解决方案。这不是一个完美的解决方案，但我有一个完整的带有 encore 的工具栏：

开始删除npm 包
```
yarn remove ckeditor
```
或ckeditor4
创建您自己的ckeditor: CK editor builder
在此复制后将您的构建粘贴到
```
assets/ckeditor/build
```

在您的 webpack.js.config 中删除其他 ckeditors 导入行并仅使用：

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

在你的 fos_ckeditor 中：

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

对我来说it worked。

【讨论】：

我使用了类似的解决方案，并且我在用户的答案中写了一条评论，但它不再可见。我的解决方案是使用 yarn 删除 ckeditor，使用命令 php bin/console ckeditor:install 安装资产并使用 copyfiles 条目更改 webpack 配置（从 public/bundle 到 build/ckeditor）它可以工作但很脏，谢谢你的帮助 :)

【解决方案3】：

我今天遇到了同样的问题，这是因为 NPM 默认安装了 standard-all 版本的 ckeditor。但是FOSCKEditor使用命令行时下载full版。

所以如果你想用 Webpack Encore 管理 ckeditor，你还需要使用 NPM 安装full 版本：

npm install ckeditor/ckeditor4-releases#full/stable

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

【讨论】：