时间戳

首页 > 解决方案 > 如何在 Reactjs 中将 CKEditor 用于数学公式和 MathJax

reactjs - 如何在 Reactjs 中将 CKEditor 用于数学公式和 MathJax

问题描述

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

这是我添加CKEditor的过程：

安装ckeditor4-react：

npm install ckeditor4-react

应用程序.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 插件？或者是否有其他方法？

标签： reactjsmathjaxckeditor4.x

解决方案

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;

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>

CodeSandBox：https ://codesandbox.io/s/gallant-dawn-8kvrg?file=/src/App.js

推荐阅读