Как использовать плагин MathType в CKEditor 5, используя ReactJS?

Question

Я установил три пакета:

1. @ ckeditor / ckeditor5-реаги *
2. @ ckeditor / ckeditor5-build-classi c
3. @ wiris / mathtype-ckeditor5 / src / plugin

Я могу установить простой ckeditor5, но не знаю, как использовать плагин MathType в этом редакторе.

Вот мой пример кода:

<CKEditor
  data={input.value}
  editor={ClassicEditor}
  onChange={(event, editor) => {
    return input.onChange(editor.getData());
  }}
/>;

Может кто-нибудь объяснить, как я могу это использовать? Спасибо.

Answer 1

Вот ссылка , которую вы должны увидеть, чтобы понять, как добавить плагин в ckeditor.

TL; DR: Вы должны создать новую сборку, содержащую ваш плагин (в вашем случае плагин MathType ), самый простой способ сделать это - использовать их онлайн-строитель , тогда вы можете использовать созданную вами сборку вместо @ckeditor/ckeditor5-build-classic, например.

Я уже проделал эту работу и опубликовал его на npm, вы можете установить его с помощью:

npm install ckeditor5-classic-with-mathtype

Вот пример использования его с реакцией:

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from 'ckeditor5-classic-with-mathtype';

...

render() {
        return (
                <CKEditor
                    editor={ClassicEditor}
                    config={{
                        toolbar: {
                            items: [
                                'heading', 'MathType', 'ChemType',
                                '|',
                                'bold',
                                'italic',
                                'link',
                                'bulletedList',
                                'numberedList',
                                'imageUpload',
                                'mediaEmbed',
                                'insertTable',
                                'blockQuote',
                                'undo',
                                'redo'
                            ]
                        },
                    }}
                    data="<p>Hello from CKEditor 5 with MathType!</p>"
                    onInit={editor => {
                        // You can store the "editor" and use when it is needed.
                        // console.log( 'Editor is ready to use!', editor );
                    }}
                />
        );
    }