How to render CKEditor4 wiris MathML formula in react JS

Question

I'm trying to render MathML into the DOM. But it's not displaying correctly as shown in the Editor.

I'm using CKEditor4

Let me just add the code below so you can understand what I have tried

App.js file:

import React from "react";
import CKEditor from "ckeditor4-react";

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: "",
        };
        CKEditor.editorUrl =
            "https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js";
    }

    onEditorChange = (evt) => {
        this.setState({
            data: evt.editor.getData(),
        });
    };

    render() {
        return (
            <div className="App">
                <CKEditor
                    data={this.state.data}
                    onChange={this.onEditorChange}
                    config={{
                        extraPlugins: "ckeditor_wiris",
                        removePlugins:
                            "filetools,uploadimage,uploadwidget,uploadfile,filebrowser,easyimage",
                        allowedContent: true,
                    }}
                    onBeforeLoad={(CKEDITOR) => {
                        CKEDITOR.plugins.addExternal(
                            "ckeditor_wiris",
                            "/mathtype-ckeditor4/",
                            "plugin.js"
                        );
                    }}
                />

                <div className="editor-preview">
                    <h2>Rendered content</h2>
                    <div
                        dangerouslySetInnerHTML={{ __html: this.state.data }}
                    ></div>
                    <p>
                        <math xmlns="http://www.w3.org/1998/Math/MathML">
                            <mi>x</mi>
                            <mo>=</mo>
                            <mfrac>
                                <mrow>
                                    <mo>-</mo>
                                    <mi>b</mi>
                                    <mo>&#177;</mo>
                                    <msqrt>
                                        <msup>
                                            <mi>b</mi>
                                            <mn>2</mn>
                                        </msup>
                                        <mo>-</mo>
                                        <mn>4</mn>
                                        <mi>a</mi>
                                        <mi>c</mi>
                                    </msqrt>
                                </mrow>
                                <mrow>
                                    <mn>2</mn>
                                    <mi>a</mi>
                                </mrow>
                            </mfrac>
                        </math>
                    </p>
                </div>
            </div>
        );
    }
}

export default App;

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>

        <!-- MathJax library to render MathML in HTML -->
        <script
            type="text/javascript"
            async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
        ></script>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

Since Chrome doesn't support MathML, I have added MathJax library in the header section

The MathJax library works fine if I paste the MathML directly into the html. But the MathML generated from CKEditor is not displaying correctly.

Please check the below image.

Result preview

Expected result:

Render the formula exactly like the editor

Actual result:

Content generated from editor are not rendering properly. But pasting the mathml directly into the HTML are rendering properly as expected.

Here is the Sandbox link as requested...

Sandbox link

Thank you for your help in advance

you need to pass ClassicEditor as edit prop to CKEditor . can you try this - https://stackoverflow.com/questions/61230962/how-to-use-mathtype-plugin-in-ckeditor-5-using-reactjs — Lakshman Kambam, Apr 17 '21 at 07:52
@LakshmanKambam I'm using CKEditor4, it doesn't requires to add editor as a prop — Farman Hafeez, Apr 17 '21 at 07:59

score 0 · Answer 1 · answered Jul 05 '21 at 15:53

If you are using just a JS frontend without plugin services, you might link WIRISplugins.js directly from our servers, like so:

No need MathJax library. Add this script to your head:

<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>

refer to this: https://docs.wiris.com/en/mathtype/integrations/html/ckeditor

How to render CKEditor4 wiris MathML formula in react JS

1 Answers1