VUE-wangeditor-富文本

WangEditor 是一个基于 Web 的富文本编辑器，它为开发者提供了一个简单易用的 API，可以方便地集成到各种 Web 应用程序中。
1，安装 WangEditor
npm install wangeditor --save 我用的版本是"wangeditor": "^4.7.15"
2，下面是在 Vue 组件中使用 WangEditor 封装的子组件实例

<script setup>
import { ref, onMounted } from "vue"
import WangEditor from "wangeditor"

let propsData = defineProps(["values"])
let emit = defineEmits(["richtextchange"])

onMounted(() => {
  let editor = new EWangEditor("#editor")
  editor.config.onchangeTimeout = 400 // onchange 事件触发的超时时间为 400 毫秒。
  editor.config.placeholder = '请输入提干' // 编辑器的占位符文本为“请输入提干”。
  editor.config.customAlert = (err) => { // 设置自定义警告函数，用于在控制台输出错误信息。
    console.log(err)
  }
  editor.customConfig = editor.customConfig ? editor.customConfig : editor.config // 检查是否存在自定义配置，如果存在则使用自定义配置，否则使用默认配置。
  editor.customConfig.onchange = (html) => {
    console.log(html)
    emit('richtextchange',html)
  } // 设置自定义的 onchange 事件处理函数，用于处理编辑器内容变化时的事件。在这个函数中，使用 emit 函数传递编辑器的 HTML 值作为参数给到父组件。
  editor.create() // 创建 WangEditor 实例，初始化编辑器并附加到指定的容器元素上。
  editor.txt.html(propsData.values?.value); // 将编辑器的初始内容设置为 propsData 中 values 的值，用于回显。
})
</script>
<template>
  <div>
    <div name="editor" id="editor" ref="editor" class="editor"></div>
  </div>
</template>
<style lang="scss">
// 编辑器层级太高
.w-e-toolbar {
  z-index: 3 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>

一般不用设置css样式的，但是有次出现过bug，编辑器遮挡了字体、字号、图片等下拉选择框，导致选不中下拉项，所以保险起见，设置权重。
3，父组件引用

import Editor from "@/components/editor.vue"
// 富文本
const richtextchange = (data) =>{
  console.log(data)
}
<Editor :values="item" @richtextchange="richtextchange"></Editor>

4，自定义工具栏
在一些场景中不需要太过复杂的菜单显示，可以自定义配置菜单显示隐藏，可以自定义配置工具栏，例如

// 配置菜单项，这里以加粗、斜体、下划线和标题为例   
editor.config.menus = ['bold', 'italic', 'underline', 'title'] 
// 下面是其它可配置项
bold：粗体
italic：斜体
underline：下划线
strikeThrough：删除线
indent：缩进
lineHeight：行高
foreColor：前景色
backColor：背景色
link：插入链接
list：列表操作
todo：待办事项
justify：对齐方式
quote：引用
emoticon：表情符号
image：插入图片
video：插入视频
table：插入表格
code：代码块
splitLine：分割线
undo：撤销操作
redo：重做操作

效果如下图

image.png

参考资料：
wangEditor | 官网地址