【SDU Chart Team - Editor】编辑器附加功能

原理

基于wangeditor提供的拓展性接口实现。它主要分为多个部分，包括抽象数据结构、渲染元素到编辑器、获取到HTML、根据HTML生成该元素以及额外的插件功能等。接下来一一介绍。

节点数据结构

我希望定义的新的编辑器中的节点可能需要特定的数据结构，以LaTeX为例，必然需要维护其LaTeX代码，用来解析到MathML。这一步就是来描述我们需要的元素的数据结构。

type EmptyText = {
   
  text: ''
}

export type FormulaElement = {
   
  type: 'formula'
  value: string
  children: EmptyText[]
}

渲染到编辑器

在定义了数据结构之后，我们就要考虑如何根据它显示到编辑器中。在本框架中是通过vdom和h函数实现的。

  // 构建 formula vnode
  const {
    value = '' } = elem as FormulaElement
  const formulaVnode = h(
    'formula-box',
    {
   
      dataset: {
    value },
    },
    null
  )