如何在 Reactjs 中更改 CKEditor 5 的配置答案

【问题标题】：How to change the config for CKEditor 5 in Reactjs如何在 Reactjs 中更改 CKEditor 5 的配置
【发布时间】：2019-10-17 04:02:26
【问题描述】：

我已根据另一个答案 https://stackoverflow.com/a/57268877/4723985 添加了配置

但是，我遇到了一个问题：

Failed to compile.

./src/components/cards/CreateCard.js
  Line 59:22:  Parsing error: Unexpected token, expected "}"

  57 |             editor={ClassicEditor}
  58 |             config={
> 59 |               toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]
     |                      ^
  60 |             }
  61 |             data="<p>Hello from CKEditor 5!</p>"
  62 |             onInit={editor => {

下面是 ReactJS 组件的相关部分：

            editor={ClassicEditor}
            config={  
              toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]
            }
            data="<p>Hello from CKEditor 5!</p>"
            onInit={editor => {
              // You can store the "editor" and use when it is needed.
              console.log("Editor is ready to use!", editor);
            }}
            onChange={(event, editor) => {
              const data = editor.getData();
              console.log({ event, editor, data });
            }}
            onBlur={(event, editor) => {
              console.log("Blur.", editor);
            }}
            onFocus={(event, editor) => {
              console.log("Focus.", editor);
            }}
          />

【问题讨论】：

标签： javascript reactjs ckeditor5

【解决方案1】：

JSX 表达式中的任何内容都必须是有效的 javascript。记住这一点，让我们看一下config 属性：

config={
  toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ] 
}

{}里面的内容是：

toolbar: []

这根本不是有效的 javascript。您正在寻找的是具有工具栏属性的对象。为了解决这个问题，你可以折射到：

config={{
  toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]
}}

【讨论】：

它解决了这个问题。感谢您的详细解释。