Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use MathType plugin in CKEditor 5 using ReactJS?

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.

like image 812
himanshu Avatar asked Apr 15 '20 14:04

himanshu


People also ask

How do you react with CKEditor?

The easiest way to use CKEditor 5 in your React application is by choosing one of the rich text editor builds. Additionally, it is also possible to integrate CKEditor 5 built from source into your application. You can also use a customized editor built by using CKEditor 5 online builder in any React application.


2 Answers

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 );
                    }}
                />
        );
    }
like image 75
Idriss AIT HAFID Avatar answered Oct 17 '22 08:10

Idriss AIT HAFID


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 );
                    }}
                />
        )
    }
like image 31
Henok Tesfaye Avatar answered Oct 17 '22 08:10

Henok Tesfaye