一、需求说明

• 项目中业务需要输入数学公式，原先的富文本框编辑器解析不了，经过跟组长讨论后决定采用Markdown类型的编辑器，以便解析和展示数学公式。查阅资料及实践后，最终形成以下方案，记录下来以供参阅。
• 组建依赖：编辑器使用 for-editor，内容预览及展示采用 react-markdown。数学公式支持及语法解析使用 remark-math、rehype-katex，数学公式的样式展示需要 katex.min.css 文件支持，见下文。因为仍需解析之前输入的富文本内容，所以引入 rehype-raw 解析HTML文本。

二、组件样式及目录

• 组件最终样式：

  
  
  组件样式.jpg

• 目录结构：

  
  
  目录结构.jpg

三、相关代码及说明

• index.js：编辑器的主体代码，具体的属性请查阅相关文档。
  • 预览按钮需手动添加，以 position 定位在编辑器上。

import React, { Fragment, useRef, useState } from 'react';
import { Button, Modal } from 'antd';
import ForEditor from 'for-editor';
import MdPreview from './md-preview';
import './index.less';

/** https://github.com/kkfor/for-editor
 * @param {string} value Markdown文本内容
 * @param {() => void} onChange 更改内容方法
 * @param {boolean} readOnly 只读状态
 */
function MdEditor({ value, onChange, readOnly = false }) {
  const [visible, setVisible] = useState(false); // 预览弹框状态
  const mdRef = useRef(null); // 编辑器ref

  // 工具栏菜单
  const toolbar = {
    h1: true, // h1
    h2: true, // h2
    h3: true, // h3
    h4: true, // h4
    img: true, // 图片
    link: true, // 链接
    code: true, // 代码块
    // preview: true, // 预览
    expand: true, // 全屏
    /* v0.0.9 */
    undo: true, // 撤销
    redo: true, // 重做
    save: true, // 保存
    /* v0.2.3 */
    // subfield: true, // 单双栏模式
  };

  // 上传图片
  // const addImg = (_file) => {
  //   mdRef.current.$img2Url(_file.name, 'file_url');
  // };

  return (
    <div className="label__md-editor">
      {readOnly ? <MdPreview content={value} /> : (
        <Fragment>
          <Button
            size="small"
            className="preview__md-button"
            onClick={() => setVisible(true)}
          >
            预览
          </Button>
          <Modal
            title="Markdown内容预览"
            width="60%"
            okText="关闭"
            visible={visible}
            onOk={() => setVisible(false)}
            onCancel={() => setVisible(false)}
            cancelButtonProps={{ style: { display: 'none' } }}
          >
            <MdPreview content={value} />
          </Modal>

          <ForEditor
            placeholder="请输入Markdown文本"
            height={160}
            ref={mdRef}
            lineNum={false}
            toolbar={toolbar}
            value={value}
            onChange={onChange}
            // addImg={_file => addImg(_file)}
          />
        </Fragment>
      )}
    </div>
  );
}

export default React.memo(MdEditor);

• index.less：涉及样式

.label__md-editor {
  position: relative;

  .preview__md-button {
    position: absolute;
    right: 44px;
    top: 11px;
  }

  .for-container textarea {
    height: 114%;
  }
}

• md-preview.js：预览组件

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';

/** https://blog.csdn.net/weixin_44589651/article/details/121044772
 * @param {string} content Markdown文本内容
 */
export default React.memo(({ content }) => (
  <ReactMarkdown
    remarkPlugins={[remarkMath]}
    rehypePlugins={[rehypeKatex, rehypeRaw]}
  >
    {content}
  </ReactMarkdown>
));

• 在项目的 index.ejs 或 inde.html 文件中引入公式解析样式文件，否则公式会乱掉

 <!-- 解析Markdown数学公式样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">

• package.json：组件涉及的依赖及版本

{
  "dependencies": {
    "antd": "3.26.16",
    "dva": "^2.6.0-beta.20",
    "for-editor": "^0.3.5", // Markdown编辑
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-markdown": "7.1.0", // Markdown预览
    "rehype-katex": "^6.0.2", // 数学公式katex语法
    "rehype-raw": "^6.1.1", // 支持HTML语法解析
    "remark-math": "^5.1.1" // 支持数学公式
  },
}

参考资料

• https://blog.csdn.net/weixin_44589651/article/details/121044772
• https://juejin.cn/post/6978304962061139976
• https://juejin.cn/post/6844904020859944974
• https://juejin.cn/post/6844903879981662215
• https://github.com/kkfor/for-editor
• https://www.cikayo.com/article/124

附文

• 1. 预览时遇到的报错

  • DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('percent<=0') is not a valid name.
  • 数据：<p>TOP1% 0.1<percent<=0.25</p>
  • 原因：解析器把 <percent<=0 识别成了标签名
  • 解决：输入数据时，< > 与 英文字母 之间加空格
  • 例如：<p>TOP1% 0.1 < percent <= 0.25</p>

• 2. Markdown语法数学公式

  • $a^2$：
  • $$\frac{\partial f}{\partial x} = 2\,\sqrt{a}\,x$$：