vue3 wangeditor自定义内容

在Vue 3中，可以使用Vue-wangeditor组件来集成wangEditor编辑器。以下是在Vue 3中添加自定义内容的步骤：

1. 在Vue 3组件中引入Vue-wangeditor组件。

<template>
  <div>
    <vue-wangeditor v-model="content" :config="editorConfig"></vue-wangeditor>
  </div>
</template>

<script>
import VueWangEditor from 'vue-wangeditor';

export default {
  components: {
    VueWangEditor,
  },
  data() {
    return {
      content: '',
      editorConfig: {
        // 在这里配置编辑器
      },
    };
  },
};
</script>

2. 在editorConfig中添加自定义菜单。在菜单的click属性中，指定要执行的函数。例如，你可以添加一个名为“自定义菜单”的菜单，并将其单击事件绑定到myCustomFunction函数。

data() {
  return {
    content: '',
    editorConfig: {
      menus: [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'quote',
        'emoticon',
        'image',
        'table',
        'video',
        'code',
        'undo',
        'redo',
        'fullscreen',
        'customMenu'
      ],
      customMenu: {
        title: '自定义菜单',
        type: 'click',
        click: () => {
          this.myCustomFunction();
        }
      }
    },
  };
},
methods: {
  myCustomFunction() {
    // 在光标处插入文本片段
    this.$refs.editor.$editor.command(null, 'insertHtml', '这是一段自定义内容');
  },
}

3. 在myCustomFunction函数中添加自定义的代码。例如，你可以在函数中插入一个文本片段。

myCustomFunction() {
  // 在光标处插入文本片段
  this.$refs.editor.$editor.command(null, 'insertHtml', '这是一段自定义内容');
},

这样就可以在Vue 3中添加自定义内容了。