Question

我的react项目中的ckeditor.js文件似乎未用于配置ckeditor。

我已经按照说明安装了CKEditor react组件，并且看来工作正常-我的编辑“字段”现在是CKEditor，可以编辑文本并保存。。但是我想做一些配置。我知道我应该使用config.js文件，但是当我查看该文件时，其内容与我看到的CKEditor不匹配。更改该文件也不会更改我的CKEditor。

在我的.jsx文件中，我开始于：

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

并在适当的位置放置CKEditor字段：

...
        <CKEditor
            editor={ ClassicEditor }
            name="body"
            placeholder="Compose message"
            data={ props.defaults.body }
            value={ props.defaults.body }
            errors={ props.errors.body }
            onChange={ ( event, editor ) => {
                    const data = editor.getData();
                    props.defaults.body = data;
                } }
        />
 ...

一切正常。在public / ckeditor内部，我看到一个config.js文件，我认为该文件可以更改编辑器的配置。但是，它定义了工具栏：

// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];

用于2行。我在CKEditor中看到的工具栏非常简单，只有一个栏，带有样式，粗体，斜体，链接...根本不匹配config.js。我猜想我应该更改ClassicEditor的创建以引用配置文件，但是考虑到上面的代码是我到达目标位置的全部工作，我迷失了寻找目标位置的方法。

我希望可以发现对config.js文件的更改会更改编辑器的配置，但不会。

其他信息：我通过修改CKEditor字段实例以直接包含配置来解决问题，尽管我希望config.js可以正常工作。

        <CKEditor
            editor={ ClassicEditor }
            name="body"
            placeholder="Compose message"
            data={ props.defaults.body }
            value={ props.defaults.body }
            errors={ props.errors.body }
            config={ {
                  toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', '|', 'redo' ]
            } }
            onChange={ ( event, editor ) => {
                    const data = editor.getData();
                    props.defaults.body = data;
                } }

配置ckeditor react组件-config.js似乎不起作用

0 个答案: