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

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

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

1 个答案: