原理
基于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
)