问题描述
我正在尝试将 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>±</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 显示不正确。
请检查下图。
预期结果:
完全像编辑器一样渲染公式
实际结果:
从编辑器生成的内容未正确呈现。但是将 mathml 直接粘贴到 HTML 中会按预期正确呈现。
这是按要求提供的沙盒链接...
提前感谢您的帮助
解决方法
如果你只使用一个没有插件服务的 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