reactjs - 如何使用 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

这是a link您应该了解如何向 ckeditor 添加插件。

TL;DR:您应该创建一个包含您的插件(在您的情况下为 MathType 插件)的新版本，最简单的方法是使用他们的 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 );
                    }}
                />
        );
    }