CK editor5 React-添加自定义按钮

Question

我已经使用教程https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html实现了React CK编辑器

代码如下。

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

class App extends Component {
    render() {
        return ( 
            <div className = "App">                
            <h2> Using CKEditor 5 build in React < /h2> 
            <
            CKEditor editor = {
                ClassicEditor
            }
            data = "<p>Hello from CKEditor 5!</p>"
            onInit = {
                editor => {
                    // You can store the "editor" and use when it's needed.
                    console.log('Editor is ready to use!', editor);
                }
            }
            onChange = {
                (event, editor) => {
                    const data = editor.getData();
                    console.log({
                        event,
                        editor,
                        data
                    });
                }
            }
            />
            </div>
        );
    }
}

export default App;

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

我已经看到有关添加新插件的帖子，但是我不确定如何以反应方式实现此功能。

任何帮助，将不胜感激。

Answer 1

您需要创建一个将注册新按钮的插件。 然后，您可以将插件加载到编辑器。 我将为您提供一些指向文档的链接，这些链接将为您提供帮助：

• 如何创建自定义插件？
• 如何制作自定义按钮？
• 如何将插件添加到编辑器版本？
• 为什么不能将插件添加到现有版本？
• 如何将CKEditor 5从源代码集成到React？