在 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

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