如何在 React JS 中渲染 CKEditor4 wiris MathML 公式

如何解决如何在 React JS 中渲染 CKEditor4 wiris MathML 公式

我正在尝试将 MathML 渲染到 DOM 中。但它没有像编辑器中显示的那样正确显示。

我正在使用 CKEditor4

让我添加下面的代码，以便您了解我的尝试

App.js 文件：

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>

由于 Chrome 不支持 MathML，我在 header 部分添加了 MathJax 库

如果我将 MathML 直接粘贴到 html 中，MathJax 库就可以正常工作。但是 CKEditor 生成的 MathML 显示不正确。

请检查下图。

Result preview

预期结果：

完全像编辑器一样渲染公式

实际结果：

从编辑器生成的内容未正确呈现。但是将 mathml 直接粘贴到 HTML 中会按预期正确呈现。

这是按要求提供的沙盒链接...

Sandbox link

提前感谢您的帮助

解决方法

如果你只使用一个没有插件服务的 JS 前端，你可能会直接从我们的服务器链接 WIRISplugins.js，如下所示：

不需要 MathJax 库。将此脚本添加到您的脑海中：

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

请参考： https://docs.wiris.com/en/mathtype/integrations/html/ckeditor