vue3中基于WangEditor5的二次封装

 WangEditor5官网：

安装 | wangEditor

详细配置看官网

<!-- WangEditor -->
<template>
  <div>
    <div class="editor-content-border">
      <Toolbar
        class="toolbar-border-b"
        :editor="editorRef"
        :default-config="toolbarConfig"
        :mode="mode"
      />
      <Editor
        v-model="valueHtml"
        :style="{ 'height': editorHeight, 'overflow-y': 'hidden'}"
        :default-config="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onBlur="handleBlur"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
      />
    </div>
  </div>
</template>

<script lang='ts'>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, defineComponent, reactive, shallowRef, toRefs } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IDomEditor } from '@wangeditor/editor'

export default defineComponent({
  name: 'CdWangEditorFive', // 富文本编辑器 5
  components: { Editor, Toolbar },
  props: {
    mode: { // 'default' 'simple'
      type: String,
      default: 'default'
    },
    toolbarConfig: { // 菜单栏
      type: Object,
      default: () => {
        // 删除菜单
        // excludeKeys: [
        //   'headerSelect',
        //   'uploadImage', // 子菜单
        //   'group-video' // 排除菜单组，写菜单组 key 的值即可
        // ],
        // 自定义 modal 的定位和其他样式
        // modalAppendToBody: true,
      }
    },
    editorConfig: { // 编辑器配置
      type: Object,
      default: () => {
        // placeholder: '请输入内容...',
        // readOnly: false, // 只读
        // autoFocus: true, // 配置编辑器默认是否 focus 默认true
        // scroll: true, // 编辑器是否支持滚动
        // hoverbarKeys: {
        //   'image': {
        //     menuKeys: [
        //       'imageWidth30',
        //       'imageWidth50',
        //       'imageWidth100',
        //       'deleteImage',
        //     ]
        //   }
        // },
        // MENU_CONF: {
        //   uploadImage: {
        //     server: '/aaaa',
        //     fieldName: 'custom-field-name'
        //     // 继续写其他配置...

        //     // 【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
        //   },
        // },
      }
    },
    // blur事件
    handleBlur: {
      type: Function,
      default: () => {}
    },
    // change事件
    handleChange: {
      type: Function,
      default: () => {}
    },
    // focus事件
    handleFocus: {
      type: Function,
      default: () => {}
    },
    handleDestroyed: {
      type: Function,
      default: () => {}
    },
    // 自定义样式以及handleCreated事件用
    customStyle: {
      type: Function,
      default: () => {
        // editor.on('modalOrPanelShow', modalOrPanel => {
        //   console.log(modalOrPanel)
        //   if (modalOrPanel.type !== 'modal') return
        //   const { $elem } = modalOrPanel // modal element

        //   // 设置 modal 样式（定位、z-index）
        //   // 显示蒙层
        // })
        // editor.on('modalOrPanelHide', () => {
        //   // 隐藏蒙层
        // })
      }
    },
    editorHeight: {
      type: String,
      default: '500px'
    },
  },
  setup(props) {
    // editorRef 必须用 shallowRef
    const editorRef = shallowRef()
    const state = reactive({
      valueHtml: '', // 绑定的值
      // 拿值和传值
      gainTxt: (flag, txt): string | void => {
        if (flag === 'get') {
          setTimeout(() => {
            state.valueHtml = txt
          }, 100)
        } else if (flag === 'set') {
          return state.valueHtml === '<p><br></p>' ? : '' : state.valueHtml
        }
      },
      handleCreated: (editor: IDomEditor) => {
        editorRef.value = editor // 记录 editor 实例，重要！
        // 判断 modalAppendToBody 为true 在修改样式
        props.customStyle(editor, props?.toolbarConfig?.modalAppendToBody)
      },
    })
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })
    return {
      editorRef,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped lang="less">
@bottom-1:1px solid #ccc;

.editor-content-border {
  border: @bottom-1;
}
.toolbar-border-b {
  border-bottom: @bottom-1;
}
</style>