如何使用 ReactJS 在 CKEditor 5 中使用 MathType 插件？

我已经安装了三个包：

1. @ckeditor/ckeditor5-react
2. @ckeditor/ckeditor5-build-classic
3. @wiris/mathtype-ckeditor5/src/plugin

我可以设置简单的 ckeditor5，但不知道如何在此编辑器中使用 MathType 插件。

这是我的示例代码：

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

谁能解释我如何使用这个？ 谢谢。

Here's a link https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html您应该了解如何向 ckeditor 添加插件。

TL;DR：您应该创建一个包含您的插件（在您的情况下为 MathType 插件）的新版本，最简单的方法是使用他们的在线构建器 https://ckeditor.com/ckeditor-5/online-builder/，那么您可以使用您生成的构建而不是@ckeditor/ckeditor5-build-classic例如。

我已经完成了这项工作并将其发布到 npm，你可以使用以下命令安装它：

npm install ckeditor5-classic-with-mathtype

这是将其与 React 一起使用的示例：

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 );
                    }}
                />
        );
    }