这个库太好用啦！可以快速在WangEditor中插入Vue组件

起因

之前写了一篇文章，讲述了如何在WangEditor中插入Vue组件，正常情况是，如果我们需要注册多个vue组件，应该需要把注册逻辑抽象成一个函数，比如wangCustomNode函数，然后再注册使用：

import { Boot } from '@wangeditor/editor'
Boot.registerModule(wangCustomNode('countbtn', CountBtn))

但，wangCustomNode这个函数，你还是要实现一遍。现在，我帮你们实现了custom-wang-element

实现原理就是我之前那篇文章说介绍的，代码也差不多。下面，就让我们开始使用吧！

使用

我们这个库将核心实现和vue分开，这样高度抽象可以实现其他mvvm库的绑定，我实现了vue2和vue3的绑定，这里同样使用vue2来做演示。

使用前先下载我们的库，下面使用pnpm作为演示：

pnpm install @custom-wang-element/core @custom-wang-element/vue2

@custom-wang-element/vue2依赖@custom-wang-element/core，所以是必须的。同样，wangEditor你应该也已经下载了。

同样使用CountBtn作为需要注册的组件，代码如下：

<template>
  <div>
    <button class="count-btn" :disabled="disabled" @click="sub">-</button>
    <span style="padding: 0 10px">{{ count }}</span>
    <button class="count-btn" :disabled="disabled" @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: 'CountBtn',
  inheritAttrs: false,
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: String,
      default: ''
    },
    updateValue: {
      type: Function,
      default() {}
    }
  },
  data() {
    return {
      count: parseInt(this.defaultValue)
    }
  },
  watch: {
    count(count) {
      if (typeof this.updateValue === 'function') {
        this.updateValue(count + '')
      }
    }
  },
  methods: {
    sub() {
      this.count -= 1
    },
    add() {
      this.count += 1
    }
  }
}
</script>

<style>
.count-btn {
  width: 25px;
}
</style>

然后就是组件注册环节，直接使用@custom-wang-element/vue2提供的createCustomElementByVue2函数即可：

import CountBtn from '@/components/count-btn.vue';
import { Boot } from '@wangeditor/editor';
import { createCustomElementByVue2 } from '@custom-wang-element/vue2';

Boot.registerModule(createCustomElementByVue2('countbtn', CountBtn));

看，只要一句代码，就实现了我们之前写了十几行的代码。

注册完就要使用了，同然我们定义一个菜单。但是等等，我们虽然注册了一个组件，但是插入一个节点是需要一个slate node的，这个自定义组件的slate node对于我们来说还是个黑盒，考虑到这点，我们提供了customWangElement函数来快速创建这个slate node。下面就是完整的菜单注册代码：

import { Boot } from '@wangeditor/editor';
import { customWangElement } from '@custom-wang-element/core';

class CountBtnMenu {
  constructor() {
    this.title = '计数器';
    this.tag = 'button';
  }
  getValue() {
    return false;
  }
  isActive() {
    return true;
  }
  isDisabled(editor) {
    return editor.isDisabled();
  }
  exec(editor) {
    // 使用customWangElement可以快速创建一个slate node
    editor.insertNode(customWangElement('countbtn', '0'));
  }
}

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

需要注意customWangElement是从@custom-wang-element/core中导入，而createCustomElementByVue2是从@custom-wang-element/vue2中导入。

上面代码写完，然后引入主文件中就可以使用啦！

总结

由于custom-wang-element的存在，让我们在WangEditor中插入Vue组件的过程变得简单、快捷，希望这个库对你们有帮助。

这个是上面案例的完整代码