文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在JS反应中渲染CKEditor4线MathML公式

问如何在JS反应中渲染CKEditor4线MathML公式
EN

Stack Overflow用户

提问于 2021-04-17 07:48:02

回答 1查看 794关注 0票数 1

我正在尝试将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库

如果我将MathJax直接粘贴到html中，那么MathML库就能正常工作。但是，从MathML生成的CKEditor没有正确显示。

请检查下面的图片。

结果预览

预期结果：

将公式呈现得与编辑器完全相同

实际结果：

从编辑器生成的内容呈现不正确。但是，将mathml直接粘贴到HTML中会像预期的那样正确地呈现。

这是要求的沙箱链接..。

沙箱连接

谢谢你提前提供帮助

javascript

reactjs

ckeditor

mathjax

mathml

回答 1

Stack Overflow用户

发布于 2021-07-05 15:53:50

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67135914

复制

相似问题

问如何在JS反应中渲染CKEditor4线MathML公式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JS反应中渲染CKEditor4线MathML公式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JS反应中渲染CKEditor4线MathML公式
EN