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

这是您应该看到的链接，以了解如何将插件添加到 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 );
                    }}
                />
        );
    }

Answer 2

https://www.npmjs.com/package/ckeditor5-build-classic-mathtype, a package which customizes classic editor build, which adds mathtype plugin.

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

...

render() {
        return (
                <CKEditor
                    editor={ClassicEditor}
                    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 );
                    }}
                />
        )
    }

Answer 3

我使用 Javascript 在 ReactJs 中使用了 MathType 编辑器。

以下是步骤：

1. 包含在 index.html 中
2. 在组件中渲染普通文本区域

<textarea name="question" id="question" cols="100" rows="6"></textarea>

3. 在 componentDidMount 函数中使用以下代码：

let ED = window.CKEDITOR;
    let mathElements = [
          'math',
          'maction',
          'maligngroup',
          'malignmark',
          'menclose',
          'merror',
          'mfenced',
          'mfrac',
          'mglyph',
          'mi',
          'mlabeledtr',
          'mlongdiv',
          'mmultiscripts',
          'mn',
          'mo',
          'mover',
          'mpadded',
          'mphantom',
          'mroot',
          'mrow',
          'ms',
          'mscarries',
          'mscarry',
          'msgroup',
          'msline',
          'mspace',
          'msqrt',
          'msrow',
          'mstack',
          'mstyle',
          'msub',
          'msup',
          'msubsup',
          'mtable',
          'mtd',
          'mtext',
          'mtr',
          'munder',
          'munderover',
          'semantics',
          'annotation',
          'annotation-xml'
      ];

    ED.plugins.addExternal( 'ckeditor_wiris',  'https://www.wiris.net/demo/plugins/ckeditor/', 'plugin.js' );

    ED.replace( 'question', {
        extraPlugins: 'ckeditor_wiris',
        // For now, MathType is incompatible with CKEditor file upload plugins.
        removePlugins: 'filetools,uploadimage,uploadwidget,uploadfile,filebrowser,easyimage',
        height: 320,
        // Update the ACF configuration with MathML syntax.
        extraAllowedContent: mathElements.join( ' ' ) + '(*)[*]{*};img[data-mathml,data-custom-editor,role](Wirisformula)'
    } );

如果要检查反应组件中的 Ml 标签。需要在组件中加载脚本：

const script = document.createElement("script");
script.src ='https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image;
script.async = true;
document.body.appendChild(script);