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

Question

我安装了三个包：

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

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

Answer 1

这是您应该看到的链接，以了解如何将插件添加到 ckeditor。

TL;DR：您应该创建一个包含您的插件的新构建（在您的情况下是 MathType 插件），最简单的方法是使用他们的在线构建器，然后您可以使用您生成的构建而不是@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 );
                    }}
                />
        );
    }