vue3 wangeditor4 的使用与封装

wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。
wangeditor4 官方文档

npm i wangeditor@4.7.6 --save

<template>
  <div class="editor-container">
    <div id="editor-box" />
  </div>
</template>

<script setup>
import E from 'wangeditor'
import { defineProps, defineEmits, onMounted } from 'vue'

const store = useStore()
const props = defineProps({
  modelValue: { type: String, default: '' }
})
const emits = defineEmits(['update:modelValue'])

// 初始化 editor 实例
let editor
// 获取 dom
let el

onMounted(() => {
  el = document.querySelector('#editor-box')
  initEditor()
  editor.txt.html(props.modelValue)
})

const initEditor = () => {
  editor = new E(el)
  editor.config.zIndex = 1
  // 菜单栏提示
  editor.config.showMenuTooltips = true
  editor.config.menuTooltipPosition = 'down'
  editor.config.onchange = function (newHtml) {
    emits('update:modelValue', newHtml)
  }
  editor.config.onchangeTimeout = 500 // 修改为 500ms

  editor.create()
}

</script>

<template>
  <editor v-model="content" />
</template>

<script setup>
import { ref } from 'vue'
import Editor from '@/components/Editor/index'

const content = ref('')
</script>