如何在Reactjs中将CKEditor与MathJax一起用于数学公式

问题描述

我想使用CKEditor，它也可以通过Mathjax创建数学公式。 我可以在没有Mathjax的情况下使用CKEditor。我不知道如何在reactjs中使用CKEditor的Mathjax插件。虽然我可以用原始代码（HTML和Javascript）来做到这一点。

这是我添加CKEditor的过程：

安装ckeditor4-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插件？还是有其他方法？

解决方法

在 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