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

Question

我安装了三个软件包：

1. @ckeditor/ckeditor 5-反应性
2. @ckeditor/ckeditor 5-构建-经典
3. @wiris/mathtype-ckeditor5 5/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 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，一个定制经典编辑器构建的软件包，它添加了mathtype插件。

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

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

以下是步骤：

1. 包括在index.html中
2. 呈现组件中的正常文本区域

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

1. 在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)'
    } );

如果要检查react组件中的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);