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

我认为与npm软件包和Encore有冲突。

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

开始删除npm软件包
```
yarn remove ckeditor
```
或ckeditor4
创建自己的ckeditor：CK editor builder
此副本后，将您的构建粘贴到
```
assets/ckeditor/build
```

删除其他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。

Answer 2

我今天遇到了同样的问题，这是因为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

Answer 3

安装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

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

3 个答案: