draft.js에서 MathJax를 사용해 보십시오.
나는 기계 학습과 확률 통계 기사를 쓰고 있는데, 과연 공식을 예쁘게 쓸 수 있다는 것은 매우 특별한 것이다.크누스 씨는 다시 위대하다.

1. 환경 설정

이번에는 아래의 라이브러리를 사용합니다.

Draft.js
Rectのrich text editorのフレームワークです。facebook製。

draft-js-plugins-editor
Draft.js の React Plugin Architecture です。 

draft-js-mathjax-plugin
Draft.js のLatex pluginです。draft-js-plugins-editor対応。

draft-js - Github
DraftJS Plugins - Github
DraftJS MathJax Plugin - Github
Awesome Draft.js - Github
기본 환경은create-react-app를 사용합니다.

npx create-react-app draftjs-mathjax
cd draftjs-mathjax
rm -rf src
npm i draft-js  draft-js-plugins-editor  draft-js-mathjax-plugin  --save

아래의 소스는 거의 모두'DraftJS MathJax Plugin - Github의 복제품이다.
src/indexjs

import React, { Component } from 'react'
import { render } from 'react-dom'
import { EditorState } from 'draft-js'
import Editor from 'draft-js-plugins-editor'
import createMathjaxPlugin from 'draft-js-mathjax-plugin'

const mathjaxPlugin = createMathjaxPlugin(/* optional configuration object */)

const plugins = [ 
  mathjaxPlugin,
]

class App extends Component {

  state = { 
    editorState: EditorState.createEmpty(),
  }

  onChange = (editorState) => {
    this.setState({
      editorState,
    })  
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        plugins={plugins}
      />  
    )   
  }
}

render(<App />, document.getElementById('root')) 

2. 시도해보기

다음 코드를 사용하여 서버를 시작합니다.

npm start

키의 "$"에 노란색 입력 화면이 표시되므로 Tex를 사용하여 방정식을 입력합니다.

좀 복잡한 공식이야.

입력 과정에서 좀 작고 못생겼지만 확인하고 나면 그만이다.

더 복잡한 고스 포인트 공식과 관련된 공식을 입력하세요.

응, 괜찮은 것 같아.
이 내용을 저장하거나 다시 불러올 수 있는 편집기를 만들면 됩니다.
공식 편집기에 관해서는 리액트를 중심으로 좀 더 조사하고 싶습니다.
draft.js에서 MathJax- 공식 편집기 - Qiita 사용
markdown-it-katex-공식 편집기-Qiita 사용