如何解决如何在Reactjs中将CKEditor与MathJax一起用于数学公式
我想使用CKEditor,它也可以通过Mathjax创建数学公式。 我可以在没有Mathjax的情况下使用CKEditor。我不知道如何在reactjs中使用CKEditor的Mathjax插件。虽然我可以用原始代码(HTML和Javascript)来做到这一点。
这是我添加CKEditor的过程:
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插件?还是有其他方法?
解决方法
在 Reactjs 中使用 mathJax 处理数学公式的 CKEditor 工作示例。
最后给出的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;
如果未在组件初始渲染中设置,则在 public/index.html
中包含 scriptTag。
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_CHTML"></script>
代码沙盒:https://codesandbox.io/s/gallant-dawn-8kvrg?file=/src/App.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。