wangeditor mhchem

### 如何在 WangEditor 中使用 mhchem 实现化学公式编辑

WangEditor 是一款功能强大的富文本编辑器，支持多种插件扩展来增强其功能。对于化学公式的输入需求，mhchem 提供了一种简便的方法来编写复杂的化学方程式。

#### 安装依赖包
为了使 WangEditor 支持 mhchem 功能，首先需要安装必要的库文件：

npm install @wangeditor/editor katex mathjax mhchem

Katex 和 MathJax 都能够渲染 LaTeX 数学表达式；而 mhchem 则是一个基于 LaTeX 的宏集，专门用来简化化学符号的书写[^1]。

#### 加载并初始化 Katex 及 Mhchem
确保页面加载了 Katex CSS 文件以及包含了对 mhchem 扩展的支持：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/mathjax/es5/tex-chtml.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex: {
    packages: {'[+]': ['mhchem']}
  }
});
</script>

这段 HTML 片段会告诉浏览器从 CDN 获取所需的资源，并配置 MathJax 来启用 mhchem 包[^2]。

#### 创建自定义插件处理化学公式
接下来要做的就是创建一个新的模块来处理含有 `\ce{}` 命令（这是 mhchem 的语法）的内容片段。这可以通过继承 `Formula` 类型来自定义解析逻辑：

import { Formula } from '@wangeditor/plugin-formula';

class ChemistryFormula extends Formula {
  constructor() {
    super();
    this.type = 'chemistry';
  }

  getHtmlElemStr(text) {
    const html = `<span class="katex">${this.escapeText(
      '\\ce{' + text.trim() + '}'
    )}</span>`;
    return html;
  }
}

这里重写了父类中的某些方法以便更好地适应 mhchem 的特殊格式化要求[^3]。

#### 注册新模块到 WangEditor 编辑器实例
最后一步是在启动前向 WangEditor 添加此自定义模块：

import { Boot, createEditor } from '@wangeditor/editor';
// ...其他导入语句...

Boot.registerModule(ChemistryFormula);

const editorConfig = {};
createEditor(editorConfig);

通过上述操作之后，当用户尝试插入带有 mhchem 样式的化学公式时，这些命令将会被正确解释并与其余文本一起显示出来[^4]。