如何在 Reactjs 中将 CKEditor 用于数学公式和 MathJax答案

【问题标题】：How to use CKEditor for Mathematical Formulas with MathJax in Reactjs如何在 Reactjs 中将 CKEditor 用于数学公式和 MathJax
【发布时间】：2023-04-02 07:05:02
【问题描述】：

我想使用 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 ckeditor4.x

【解决方案1】：

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>

代码沙盒：https://codesandbox.io/s/gallant-dawn-8kvrg?file=/src/App.js

【讨论】：