8

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.

keikai
  • 14,085
  • 9
  • 49
  • 68
himanshu
  • 461
  • 9
  • 21

3 Answers3

10

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 );
                    }}
                />
        );
    }
Idriss AIT HAFID
  • 301
  • 2
  • 6
1

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 );
                    }}
                />
        )
    }
Henok Tesfaye
  • 8,287
  • 13
  • 47
  • 84
  • Issue is how to use full MathType edior and urrently i'm getting 4-5 symobls in editor. I have taken subscription of wiris but don't know where to use keys. – himanshu May 22 '20 at 07:27
  • Using the package, you can add a math formula in your editor right? – Henok Tesfaye May 22 '20 at 07:50
  • After using this package i can get math-editor with some functionality but i need complete formulas which wiris provided for mathType editor .check below url http://www.wiris.com/en/mathtype – himanshu May 22 '20 at 07:56
  • yes, that is what this package provides. what functionalities is left? when you click the square root icon you will see a mathtype editor. – Henok Tesfaye May 22 '20 at 08:02
  • Yes i can see math type editor but like this: https://ibb.co/YydF2nk – himanshu May 22 '20 at 08:06
  • No that shouldn't be, I think it may be because of your internet connection. – Henok Tesfaye May 22 '20 at 08:11
  • Not an internet connection issue. Mathtype editor is not free need to take subscription for this. – himanshu May 22 '20 at 08:26
  • No I don't think, I don't have a subscription but it is working for me. – Henok Tesfaye May 22 '20 at 08:30
  • When i started working on the MathType editor it was working correctly but after few days it will show only 4-5 formulas. Now i have installed your package still i'm getting same formulas. – himanshu May 22 '20 at 08:32
0

I have used MathType Editor in ReactJs using Javascript.

Here is the steps:

  1. Include in index.html
  2. render normal text area in the component
<textarea name="question" id="question" cols="100" rows="6"></textarea>
  1. use below code in componentDidMount function : 
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)'
    } );

If you want to check Ml tags in the react component. Need to load a script in the component:

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);
himanshu
  • 461
  • 9
  • 21