简介

custom-wang-element是一个快速定义wangEditor自定义element的库，外部组件只要实现ICmp接口，既可以在对应的mvvm框架中接入各自的组件。

安装

custom-wang-element依赖wangEditor，需要提前安装wangEditor，已安装可以跳过

npm install @wangeditor/editor --save

然后安装custom-wang-element

npm install @custom-wang-element/core --save

使用

在初始化wangEditor前，使用createCustomElement创建一个module并在注册：

import { createCustomElement } from "@custom-wang-element/core";
import { Boot } from "@wangeditor/editor";

// 注册一个组件
Boot.registerModule(createCustomElement('countbtn', countBtnCreator))

上面的例子中，'countbtn'是我们创建自定义元素的tag，需要全局唯一，不可重复注册，countBtnCreator是一个CmpCreator函数，CmpCreator函数是一个ICmp的构建函数，countBtnCreator的作用就是构建一个countBtn组件，提供给wangEditor使用。代码大致如下，省略具体实现：

function countBtnCreator(options: CmpCreatorOptions): ICmp {
  let wrapper = document.createElement("div")
  return {
    getEl() {
      return wrapper
    },
    update(options) {
    },
    unmount() {
      wrapper = null
    }
  }
}

注册完组件后，即可在wangEditor中使用，正常我们是在自定义菜单中插入一个自定义元素：

import { customWangElement } from "@custom-wang-element/core";
import { Boot } from "@wangeditor/editor";
class CountBtnMenu {
  constructor() {
    this.title = '计数器'
    this.tag = 'button'
  }
  getValue(editor) {
    return false
  }
  isActive(editor) {
    return true
  }
  isDisabled(editor) {
    return editor.isDisabled()
  };
  exec(editor, value) {
    // 这里插入我们的自定元素，这里我们提供了customWangElement函数来创建一个SlateElement
    editor.insertNode(customWangElement('countbtn', '0'))
  };
  
}

Boot.registerMenu({
  key: 'countbtn-menu', // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new CountBtnMenu() // 把 `YourMenuClass` 替换为你菜单的 class
  },
})

在上面代码中，我们在exec方法中插入一个SlateElement来添加我们的自定义组件。由于我们的自定义元素的SlateElement类型是CustomWangElement，我们提供了customWangElement来快速创建：

import { customWangElement } from "@custom-wang-element/core";

customWangElement('countbtn', '0')

具体的使用，可以查看案例

内置api和接口类型

createCustomElement

function createCustomElement(tag: string, cmpCreator: CmpCreator, options?: Partial<ElemOption>): CustomElementModule

tag是wangEditor的组件名，必须唯一

cmpCreator是外部组件构造器，返回一个ICmp对象

options是自定义初始化wangEditor组件根节点snabbdom的vnode参数

只需实现CmpCreator，即可在其他mvvm框架中，接入其自定义组件。

CmpCreator

type CmpCreator = (options: CmpCreatorOptions) => ICmp

CmpCreatorOptions

export type CmpCreatorOptions = CmpUpdateOptions & {
  defaultValue: string,
  updateValue: (arg: string) => void
}

CmpUpdateOptions

export type CmpUpdateOptions = {
  disabled: boolean
  selected: boolean
}

ICmp

interface ICmp {
  getEl(): (Element | null)
  unmount(): void
  update(options: CmpUpdateOptions): void
}

ICmp.getEl是用户获取插入组件的HTMLElement节点。

ICmp.unmount是自定义组件在wangEditor卸载该节点时的钩子函数。

ICmp.update是在编辑器disabled和selected更新的时候，通知外部组件更新状态的钩子。

ElemOption

import { VNodeData } from 'snabbdom'

type ElemOption = {
  tag: string
  inline: boolean
  props: Record<string, any>,
} & VNodeData

tag是生成snabbdomVnode是的根节点标签，默认是'span'

inline说明只定义节点是行内元素，而非块元素，默认是true

props是传入snabbdomVnode根节点的props数据，默认是{ contentEditable: false }

VNodeData请查看snabbdom文档

customWangElement

创建一个SlateElement，作用是创建一个createCustomElement注册后的Slate节点

function customWangElement(type: string, value: any): CustomWangElement

第一个参数type是调用createCustomElement的tag，也就是自定义节点的tag

第二个参数value是自定义元素的初始数据，所有非string类型数据，都会被JSON.stringify处理。null和undefined会转成空字符串''。

其他mvvm框架的绑定

虽然custom-wang-element提供了抽象的接口，可以自行接入其他mvvm框架中，但是需要自己实现CmpCreator，确实有点麻烦，这里我们提供了如下框架的版本的CmpCreator绑定：

• vue2
• vue3