如何在react JS中呈现CKEditor4 wiris MathML公式
我试图将MathML渲染到DOM中。但是它没有像编辑器中显示的那样正确显示。
我正在使用CKEditor4
让我在下面添加代码，这样你就可以理解我的尝试了
应用程序。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，我在标题部分添加了MathJax库
如果我将MathML直接粘贴到html中，MathJax库就可以正常工作。但是从CKEditor生成的MathML没有正确显示。
请查看下图。
结果预览
预期结果：
像编辑器一样渲染公式
实际结果：
从编辑器生成的内容未正确呈现。但是，将mathml直接粘贴到HTML中可以像预期的那样正确呈现。
这里是沙盒链接要求...
沙箱链接
事先谢谢你的帮助
共有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
-
我正在尝试在表FORNMAT中显示数据。数据来自API。我需要显示表一旦数据接收从api。我正在使用类组件。下面我给出了尝试的东西。 //下面是我的jsx //下面是我从api获取数据的函数 //下面是我的api输出
-
我刚开始检查react表单。我遇到了一个问题，react在渲染中标记了我试图填充输入框标签的行。以下是我的应用程序代码： 在这一点上，我所要做的就是用名称输入框的标签为“您的名字”来呈现表单，如果没有输入名称，则让react用名称输入框的标签为“您需要输入您的名字”来重新呈现表单。 非常感谢任何援助。
-
问题内容： 更新待办事项中的对象的最佳方法是什么？我尝试通过它进行映射，但是它没有返回任何错误。 码： 问题答案： 您不会在体内返回任何内容，如果您不返回任何内容，则默认情况下它将返回。 用这个： 或者，您也可以这样编写它，而无需使用： 注意： 我们不能直接渲染任何内部，因为date是一个对象，因此您需要使用或任何其他方法将其转换为。 查看待办事项示例： 查看此代码段以了解：
-
问题内容： 在我的应用程序中，我将收到一个字节流，并将其转换为手机内存中的pdf文件。如何将其渲染为pdf？并在活动中显示？ 问题答案： 某些手机（例如Nexus One）预先安装了Quickoffice版本，因此将文件保存到SD卡后，发送适当的Intent可能很容易。
-
假设我有： 我如何使它最终具有SMTH1行量，每个行包含SMTH2列量？
-
我知道我可以在呈现组件时传递。我还知道方法。但问题是，不太有用，因为我的组件不知道它的初始状态。我有。所以我想在渲染的时候传递它。 类似这样的内容（伪代码）： 我该怎么办？ 假设我有一个组件。当我第一次呈现它时，初始状态与数据库中当前注释的快照相对应。当用户包含注释时，该列表将发生更改，这就是为什么它应该是而不是。现在，为了呈现注释的初始快照，我应该将它传递给组件，因为它无法知道它。我感到困惑的是