如何使用ReactJS在CKEditor 5中使用MathType插件? [英] How to use MathType plugin in CKEditor 5 using ReactJS?

问题描述

我已经安装了三个软件包:

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

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

这是我的示例代码:

 < CKEditor数据= {input.value}编辑器= {ClassicEditor}onChange = {(event，editor)=>{返回input.onChange(editor.getData());}}/> ;; 

任何人都可以解释我如何使用它吗?谢谢.

解决方案

在这里链接，您应该了解如何将插件添加到ckeditor.

TL; DR:您应该创建一个包含插件(在您的情况下为MathType插件)的新内部版本，最简单的方法是使用其

I have installed three packages:

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

I'm able to setup simple ckeditor5 but don't know how to use MathType plugin in this editor.

Here is my sample code:

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

Can anyone explain how i can use this? Thanks.

解决方案

Here's a link you should see to understand how to add a plugin to ckeditor.

TL;DR: You should create a new build containing your plugin (in your case MathType plugin), the easiest way to do it is using their online builder, then you can use that build that you generated instead of @ckeditor/ckeditor5-build-classic for example.

I have already done this work and published it to npm, you can install it with:

npm install ckeditor5-classic-with-mathtype

Here's an example of using it with 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 );
                    }}
                />
        );
    }

这篇关于如何使用ReactJS在CKEditor 5中使用MathType插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！