Как изменить конфиг для CKEditor 5 в Reactjs - PullRequest
Новая
       11

Как изменить конфиг для CKEditor 5 в Reactjs

1 голос
/ 17 октября 2019

Я добавил конфигурацию согласно другому ответу 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);
            }}
          />

1 Ответ

2 голосов
/ 17 октября 2019

Все, что находится внутри выражения JSX, должно быть допустимым JavaScript. Имея это в виду, давайте посмотрим на config prop: 

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

Внутри {}, содержимое: 

toolbar: []

, которое вообще не является допустимым javascript,То, что вы ищете, это объект со свойством панели инструментов. Чтобы решить эту проблему, вы можете рефрактор: 

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