向reactjs CK编辑器5的工具栏添加新按钮

Question

代码如下。

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



render() {
    let selectedDocument = this.state.documentDetails;
    return (
             <div>
                <div>
                    {
                      selectedDocument.html_content &&
                      <div className="form-group">
                        <CKEditor
                            editor={ ClassicEditor }
                            data={selectedDocument.html_content }
                            onInit={ editor => {
                            } }
                            onChange={ ( event, editor ) => {
                              const data = editor.getData();
                              let obj = {
                                target: {
                                  name: 'html_content',
                                  value: data
                                }
                              }
                              this.handleChange(obj);
                            } }

                        />
                      </div>
                    }

                  </div>
             </div>
    );
  }

使用以上代码，将显示带有基本工具栏按钮的编辑器。

现在，我需要向工具栏添加一个新按钮，单击该按钮时需要调用javascript函数。

我已经看到了有关创建自定义插件的文档，但是我不确定如何以反应方式实现这一点。

关于如何实现这一点的任何想法？ 一段示例代码将非常有帮助。

Answer 1

在CKEditor文件夹中找到config.js并使用您的插件更新config.extraPlugins ，例如config.extraPlugins = 'html5video,widget,widgetselection,clipboard,lineutils,videoembed'; 它将在CKEditor上显示新的工具栏或按钮。