добавление новой кнопки на панель инструментов редактора реагировать 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.js в папке CKEditor и обновите config.extraPlugins с помощью своего плагина, например config.extraPlugins = 'html5video,widget,widgetselection,clipboard,lineutils,videoembed';. Он отобразит новую панель инструментов или кнопку на CKEditor.