如何在 React JS 中呈现 CKEditor4 wiris MathML 公式答案

【问题标题】：How to render CKEditor4 wiris MathML formula in react JS如何在 React JS 中呈现 CKEditor4 wiris MathML 公式
【发布时间】：2025-12-28 07:25:16
【问题描述】：

我正在尝试将 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，我在标题部分添加了 MathJax 库

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

请查看下图。

Result preview

预期结果：

像编辑器一样渲染公式

实际结果：

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

这里是请求的沙盒链接...

Sandbox link

提前感谢您的帮助

【问题讨论】：

您需要将 ClassicEditor 作为编辑道具传递给 CKEditor 。你可以试试这个 - *.com/questions/61230962/…
@LakshmanKambam 我用的是CKEditor4，不需要添加编辑器作为道具
你能提供这个的codeandbox链接吗？
@LakshmanKambam 完成，立即查看
确定让我检查一下。

标签： javascript reactjs ckeditor mathjax mathml

【解决方案1】：

如果您只使用没有插件服务的 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

【讨论】：