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

Question

我已经按照另一个答案添加了配置

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

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);
            }}
          />

Answer 1

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

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

{}里面的内容是：

toolbar: []

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

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

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

How to change the config for CKEditor 5 in Reactjs

javascript

reactjs

ckeditor5