javascript - CKEditor 5 和 ReactJS : I can't edit the toolbar

Question

我正在阅读文档 ( link )，但我不确定如何编辑工具栏。这是编辑器组件:

import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class EditorComponent extends Component {
    constructor(props) {

      super(props);

      this.state = {
        id: props.id,
        content: props.content,
        handleWYSIWYGInput: props.handleWYSIWYGInput,
        editor: ClassicEditor
      }

    }

    render() {
        return (
            <div className="Editor-content">
                <CKEditor
                    editor={ this.state.editor }
                    data={this.state.content}
                    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();
                        this.state.handleWYSIWYGInput(this.props.id, data);
                        console.log( { event, editor, data } );
                        console.log(this.state.content);
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default EditorComponent;

我尝试使用componentDidMount中链接中提供的代码，但出现此错误TypeError: "can't conversion null to object"

componentDidMount() {
  this.state.editor
  .create( document.querySelector( '#editor' ), {
      toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
      heading: {
          options: [
              { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
              { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
              { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
          ]
      }
  } )
  .catch( error => {
      console.log( error );
  } );
}

我应该在哪里使用文档中提供的代码来自定义工具栏？

Answer 1

将配置直接传递到 config property :

<CKEditor
    editor={ this.state.editor }
    data={this.state.content}
    // ...
    config={
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
    }
    // ...
/>