如何在Reactjs中用CKEditor实现MathJax的数学公式
如何在Reactjs中用CKEditor实现MathJax的数学公式
提问于 2020-09-13 03:54:23
，我想使用CKEditor，它也用Mathjax创建数学公式。我可以不用Mathjax使用CKEditor。我不知道如何在reactjs中使用CKEditor的Mathjax插件。虽然我能够用原始代码(HTML和Javascript).来完成这个任务。
下面是我添加CKEditor的过程：
安装ckeditor4 4-react：
npm install ckeditor4-react
App.js:
import React, { Component } from 'react';
import CKEditor from 'ckeditor4-react';
class App extends Component {
render() {
return (
<div className="App">
<h2>Using CKEditor 4 in React</h2>
<CKEditor
data="<p>Hello from CKEditor 4!</p>"
/>
</div>
);
}
}
export default App;
现在如何使用CKEditor的mathjax插件？或者有别的办法？
回答 1
Stack Overflow用户
发布于 2021-04-17 10:54:41
CKEditor在Reactjs中用mathJax处理数学公式的实例。
最后给出了
CodeSandBox url。检查一下。
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 = (e) => {
this.setState({
data: e.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>
</div>
</div>
);
}
}
export default App;如果在组件初始呈现中没有设置scriptTag，则在public/index.html中包含它。
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_CHTML"></script>CodeSandBox：https://codesandbox.io/s/gallant-dawn-8kvrg?file=/src/App.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63867009
复制相关文章
相似问题
腾讯云开发者
