javascript - 在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 函数。

我看过有关创建自定义插件的文档，但我不确定如何以 react 方式实现它。

关于如何实现这一点有什么想法吗？一段示例代码确实很有帮助。

Answer 1

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