vue富文本wangeditor加@人功能（vue2 vue3都可以）

依赖

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"@wangeditor/plugin-mention": "^1.0.0",

RichEditor.vue

<template>
  <div style="border: 1px solid #ccc; position: relative">
    <Editor
      style="height: 100px"
      :defaultConfig="editorConfig"
      v-model="valueHtml"
      @onCreated="handleCreated"
      @onChange="onChange"
    />
    <mention-modal
      v-if="isShowModal"
      @hideMentionModal="hideMentionModal"
      @insertMention="insertMention"
      :position="position"
      :list="list"
    ></mention-modal>
  </div>
</template>

<script setup lang="ts">
import {
   
    ref, shallowRef, onBeforeUnmount, nextTick, watch } from 'vue';
import {
   
    Boot } from '@wangeditor/editor';
import {
   
    Editor } from '@wangeditor/editor-for-vue';

import mentionModule from '@wangeditor/plugin-mention';
import MentionModal from './MentionModal.vue';
// 注册插件
Boot.registerModule(mentionModule);

const props = withDefaults(
  defineProps<{
   
   
    content?: string;
    list: any[];
  }>(),
  {
   
   
    content: '',
  },
);
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// const valueHtml = ref('<p>你好<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="A张三" data-info="%7B%22id%22%3A%22a%22%7D">@A张三</span></p>')
const valueHtml = ref('');
const isShowModal = ref(false);

watch(
  () => props.content,
  (val: string) => {
   
   
    nextTick(() => {
   
   
      valueHtml.value = val;
    });
  },
);

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
   
   
  const editor = editorRef.value;
  if (editor == null) return;
  editor.