CK editor5 React - Добавить пользовательскую кнопку

Question

Я реализовал реагирующий CK-редактор, используя учебник https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

Код выглядит следующим образом.

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?