富文本编辑器：主流插件简介与wangEditor深度配置指南
在现代Web开发中，富文本编辑器是内容管理系统、博客平台、在线文档等应用中不可或缺的组件。本文将简要介绍几款主流富文本编辑器，并深入探讨轻量级且强大的wangEditor的配置与使用。
一、富文本编辑器概述
富文本编辑器（Rich Text Editor）允许用户在网页中进行所见即所得（WYSIWYG）的内容编辑，提供了类似Word文档的编辑体验。
主流富文本插件简介
- Quill：一款开源的轻量级富文本编辑器，具有良好的兼容性和强大的扩展性。它采用独特的Delta格式来描述文档变化，便于实时协作和版本管理。Quill 2.0版本引入了新的registry功能，支持多个具有不同样式配置的编辑器在同一页面共存
CKEditor 5：功能强大的企业级富文本编辑器框架，采用模块化架构设计。它支持导出为Word、Pdf格式，也能导入Word文本，并支持AI文本助手（部分功能可能需付费）
TinyMCE：老牌商业编辑器，功能全面，拥有丰富的插件生态
UEditor：由百度推出的富文本编辑器，在国内应用较为广泛，功能齐全，但项目近两年维护和更新较少
Tiptap：基于ProseMirror的现代编辑器，强调灵活性和可定制性，尤其适合基于React的技术栈
二、wangEditor：轻量易用的国产利器
wangEditor是一款基于JavaScript和CSS开发的轻量级Web富文本编辑器，以其配置方便、使用简单、开源免费的特点，在国内项目中备受青睐
wangEditor的优势
轻量级：最小配置下仅约80KB，加载速度快
易用性：API设计简洁，文档详尽（尤其中文文档完善），上手容易
功能齐全：提供了标题、字体样式、颜色、列表、对齐、链接、图片、视频、表格、代码块等常用编辑功能
开源免费：采用MIT协议，可免费用于商业项目
兼容性：支持IE10+浏览器
wangEditor的安装与引入
1. 安装
Vue 3项目:
npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue@next --save2. 引入样式
在全局（如main.js）或组件中引入CSS样式：
import '@wangeditor/editor/dist/css/style.css'wangEditor的核心配置与使用
基本使用
Vue 3项目创建一个基本的编辑器组件：
<template> <div style="border: 1px solid #ccc"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" /> </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const mode = ref('default')
// 或 'simple' const editorRef = shallowRef()
// 编辑器实例，必须用 shallowRef
const valueHtml = ref('<p>hello</p>')
// 编辑器内容
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = { placeholder: '请输入内容...' }
const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例，重要！ }
// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy() })
</script>自定义菜单功能
wangEditor允许你自定义需要显示的菜单项：
// 示例：配置工具栏显示的菜单项
toolbarConfig: {excludeKeys: ['fullScreen', // 排除全屏"group-video" // 排除视频组],// 或者使用 insertKeys 自定义插入项insertKeys: {index: 0,keys: ['uploadAttachment'] // 例如自定义的“上传附件”菜单}
}图片上传配置
图片上传是富文本编辑器的常见需求，wangEditor提供了灵活的配置选项：
editorConfig: {MENU_CONF: { // 菜单配置uploadImage: {server: '/api/upload-image', // 上传图片的服务器端API地址fieldName: 'file', // 表单数据的字段名，后端根据此字段获取文件maxFileSize: 2 * 1024 * 1024, // 单个文件最大体积限制，默认为2MmaxNumberOfFiles: 10, // 一次最多上传多少个文件，默认为100allowedFileTypes: ['image/*'], // 选择文件时的类型限制，默认为['image/*']// 自定义上传参数，如token等，会添加到formData中一起上传meta: {token: 'xxx',otherKey: 'yyy'},withCredentials: true, // 跨域是否传递cookie，默认为falsetimeout: 5 * 1000, // 超时时间，默认为10秒// 自定义插入图片customInsert(res, insertFn) {// res 是服务器返回的结果insertFn(res.data.url, '', '') // 参数：src、alt、href},// 上传错误回调onError(file, err, res) {if (file.size > maxFileSize) {alert('图片大小不能超过2M');} else {alert('上传出错');}}}}
}自定义插件扩展
通过Boot.registerModule可以注册自定义插件来扩展功能：
import { Boot } from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment' // 假设有附件插件// 只注册一次
Boot.registerModule(attachmentModule)注意事项与常见问题
编辑器实例化时机：确保在DOM渲染完成后（如Vue的mounted或onMounted钩子，或使用this.$nextTick）再创建编辑器实例，否则可能找不到挂载容器
组件销毁：在组件销毁时（如Vue的
beforeUnmount），务必调用editor.destroy()来释放资源，避免内存泄漏v-show与v-if：使用
v-show控制编辑器显隐时，注意可能存在的重复创建实例问题。使用v-if则需在$nextTick中创建实例样式覆盖：由于编辑器样式可能受全局样式影响，有时需要通过更高优先级的CSS规则来覆盖默认样式