wangEditor 公式

English Documentation

介绍

wangEditor-next 公式插件，使用 LateX 语法。

安装

yarn add katex
yarn add @wangeditor-kai/plugin-formula

使用

注册到编辑器

import { Boot, IEditorConfig, IToolbarConfig } from '@wangeditor-kai/editor'
import formulaModule from '@wangeditor-kai/plugin-formula'

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(formulaModule)

配置

// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  // 选中公式时的悬浮菜单
  hoverbarKeys: {
    formula: {
      menuKeys: ['editFormula'], // “编辑公式”菜单
    },
  },

  // 其他...
}

// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  insertKeys: {
    index: 0,
    keys: [
      'insertFormula', // “插入公式”菜单
      // 'editFormula' // “编辑公式”菜单
    ],
  },

  // 其他...
}

然后创建编辑器和工具栏，会用到 editorConfig 和 toolbarConfig 。具体查看 wangEditor 文档。

显示 HTML

公式获取的 HTML 格式如下

<span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="c = \\pm\\sqrt{a^2 + b^2}"></span>

其中 data-value 就是 LateX 格式的值，可使用第三方工具把 <span> 渲染成公式卡片，如 KateX。

HTML 页面集成指南

在 HTML 页面中使用公式插件

如果您需要在 HTML 页面（而非 Node.js 环境）中使用公式插件，请按以下步骤操作：

1. 构建插件

首先确保插件已构建：

# 在插件目录下
cd packages/plugin-formula
pnpm build

# 或在项目根目录
pnpm build

构建成功后，会生成 dist/index.js 文件。

2. 引入依赖

<!-- 引入 KaTeX 样式和脚本 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>

<!-- 引入编辑器 -->
<script src="path/to/wangeditor/dist/index.js"></script>

<!-- 引入公式插件 -->
<script src="path/to/plugin-formula/dist/index.js"></script>

3. 准备依赖环境

公式插件依赖特定的全局变量，需要在加载插件前准备：

// 准备插件依赖
window.editor = window.wangEditor  // 插件需要 global.editor
window.snabbdom = {
  h: function(tag, data, children) {
    // 虚拟DOM节点创建函数
    return {
      sel: tag,
      data: data || {},
      children: Array.isArray(children) ? children : (children ? [children] : []),
      text: typeof children === 'string' ? children : undefined,
      elm: undefined,
      key: (data && data.key) ? data.key : undefined,
      dataset: (data && data.dataset) || {},
      attrs: (data && data.attrs) || {},
      props: (data && data.props) || {},
      style: (data && data.style) || {},
      on: (data && data.on) || {},
      hook: (data && data.hook) || {}
    }
  }
}

4. 注册插件

const E = window.wangEditor

// 注册公式插件
const formulaModule = window.WangEditorFormulaPlugin
if (formulaModule) {
  E.Boot.registerModule(formulaModule)
  console.log('公式插件注册成功')
}

5. 配置编辑器

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容，支持插入数学公式...',
  hoverbarKeys: {
    formula: {
      menuKeys: ['editFormula'] // 编辑公式菜单
    }
  }
}

// 工具栏配置
const toolbarConfig = {
  insertKeys: {
    index: 0,
    keys: ['insertFormula'] // 插入公式按钮
  }
}

6. 创建编辑器

const editor = E.createEditor({
  selector: '#editor-container',
  config: editorConfig
})

const toolbar = E.createToolbar({
  editor,
  selector: '#toolbar-container',
  config: toolbarConfig
})

完整示例

参考 packages/editor/examples/formula-test.html 查看完整的工作示例。

常见问题

Q: 插件注册失败，提示 "Not found menu item factory" A: 确保插件已正确构建，并且在创建编辑器前注册插件。

Q: 出现 "snabbdom.h is not a function" 错误 A: 确保按照步骤3准备了 snabbdom 环境。

Q: 公式无法渲染或显示异常 A: 确保引入了 KaTeX 样式文件和脚本文件。

其他

支持 i18n 多语言