15 行代码在 wangEditor v5 使用数学公式

前言
wangEditor v5 正式版发布在即，为了验证它的扩展性，我开发了几个常用的第三方插件。本文介绍一下 formula 插件的设计和使用。

插入数学公式要使用 LateX 语法，渲染公式需要依赖工具 KateX。如 c = \pm\sqrt{a^2 + b^2} 将渲染为下图的公式。

PS：本插件不依赖于任何框架，JS Vue React 等任何框架都可以正常使用。

使用
首先要了解 wangEditor v5 最基本的安装和使用，可参考文档。然后再查阅 wangEditor-plugin-formula 插件的文档。

安装和注册
安装 katex 和 @wangeditor/plugin-formula

yarn add katex
yarn add @wangeditor/plugin-formula
复制代码

注册到 wangEditor

import { Boot } from '@wangeditor/editor'
import formulaModule from '@wangeditor/plugin-formula'

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
Boot.registerModule(formulaModule)
复制代码
此时 wangEditor 就已经具备了显示公式的能力，但还需要配置菜单：插入公式，编辑公式。

配置菜单
配置工具栏，把 insertFormula 和 editFormula 插入到 index 指定的位置。

import { IToolbarConfig } from '@wangeditor/editor'

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

  // 其他...
}
复制代码

当然，editFormula 也可以配置到编辑器的悬浮菜单中

import { IEditorConfig } from '@wangeditor/editor'

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

  // 其他...
}
复制代码

此时，即可通过菜单来插入公式：

选中公式节点时，还可以编辑公式：

显示 HTML
执行 editor.getHtml() 获取的公式节点的 HTML 格式如下，就是一个普通的 <span> ，其中 data-value 即 LateX 语法的字符串。

<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>
复制代码

将这个 <span> 渲染为公式卡片，依然可以借助 KateX ，简单方便。

katex.render("c = \\pm\\sqrt{a^2 + b^2}", spanElement, {
    throwOnError: false
})
复制代码

回显 HTML （重新编辑）
获取的 HTML 依然支持回显到编辑器中，可以正常解析为公式卡片。这些能力早在注册 formulaModule 之后就已经具备了。

const editor = createEditor({
  selector: '#editor-container',
  config: editorConfig,
  html: `<p>hello&nbsp;world<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></p>`,
})
复制代码

设计
一些基本的扩展能力，如注册菜单、生成 html ，解析 html 等，这些 wangEditor 都早已具备且成熟，参考文档和该插件的源码即可。

编辑器内部渲染公式卡片
本文重点介绍：如何使用 KateX 在编辑器中渲染公式卡片？
因为，wangEditor 中渲染流程是比较复杂的，如下图：

要借助 KateX 渲染是直接操作 DOM ，而 wangEditor 内部渲染需要先生成 VDOM ，然后再使用 snabbdom.js 来 patch DOM 。两者无法兼容。

最后找到的解决方案是：自定义 DOM 元素。注册一个 <w-e-formula-card data-value="xxx"><w-e-formula-card> 元素，即可像普通的 <div> <p> 一样生成 VDOM ，然后 patch 渲染。

// 构建 formula vnode
const { value = '' } = elem as FormulaElement
const formulaVnode = h(
    'w-e-formula-card',
    {
        dataset: { value },
    },
    null
)
复制代码

import katexStyleContent from '!!raw-loader!katex/dist/katex.css'
import katex from 'katex'

class WangEditorFormulaCard extends HTMLElement {
  private span: HTMLElement

  // 需要监听的 attr
  static get observedAttributes() {
    return ['data-value']
  }

  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' }) // Shadow DOM
    const document = shadow.ownerDocument

    const style = document.createElement('style')
    style.innerHTML = katexStyleContent // 加载 css 文本
    shadow.appendChild(style)

    const span = document.createElement('span')
    span.style.display = 'inline-block'
    shadow.appendChild(span)
    this.span = span
  }

  // 'data-value' 变化时，重新渲染 DOM
  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
    if (name === 'data-value') {
      if (oldValue == newValue) return
      this.render(newValue || '')
    }
  }

  // 用 KateX 渲染公式
  private render(value: string) {
    katex.render(value, this.span, {
      throwOnError: false,
    })
  }
}

window.customElements.define('w-e-formula-card', WangEditorFormulaCard)
复制代码

总结
本文重点

公式使用 LateX 语法，使用 KateX 工具来渲染
编辑器内部注册自定义元素 <w-e-formula-card> 渲染公式
开发 formula 插件验证了 wangEditor v5 全面的扩展能力
最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激！

PHP学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com