1、前言

现有的Quill比较简单，无法满足业务需求（例如SEO的图片属性编辑需求）
Quill已经有比较长的时间没有更新了，虽然很灵活，但是官方demo都没有一个。
业务前期也没有这块的需求，也没有考虑到这块的扩展问题。
市面上常见的富文本编辑器比较：

开源富文本编辑器比较
常见富文本编辑器大对比
发现很多人不是很推荐quill。(说实话，我也不是很推荐，一个富文本编辑器，你官方demo都不整一个，你是要上天么？）

2、官网入门

官网地址

官网介绍

（看下就行了，基本上都差不多）
官网介绍

用于 Vue React | wangEditor

直接找到对应的Vue版本就可以了，React有用到的话，也可以用下（本人没有用到）

Vue 2版本
Vue3版本
React版本

官网demo

官方提供了一个在线的版本，可以直接在线编辑试用。如果网络不好，也可以把代码下载到本地处理。
Demo代码在线运行地址

安装wangEditor

 npm install @wangeditor/editor --save # 或者 yarn add @wangeditor/editornpm install @wangeditor/editor-for-vue --save # 或者 yarn add @wangeditor/editor-for-vue

注：1、安装前请注意看下你对应的Vue版本是Vue2还是Vue3。
2、可能会常出现版本冲突的问题，如果出现版本的问题，请添加npm的安装参数 --legacy-peer-deps（具体干啥用的，请自行百度）

3、基本配置项

(1) 组件引用

<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><!-- 工具栏 --><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig"/><!-- 编辑器 --><Editorstyle="height: 400px; overflow-y: hidden":defaultConfig="editorConfig"v-model="html"@onChange="onChange"@onCreated="onCreated"/></div> </div>
</template>

(2)默认配置项

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
export default {name: "MyEditor",components: { Editor, Toolbar },data() {return {editor: null,html: "<p>hello&nbsp;world</p>",toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],// excludeKeys: [ /* 隐藏哪些菜单 */ ],},editorConfig: {placeholder: "请输入内容...",// autoFocus: false,// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {},},};},methods: {onCreated(editor) {// 【注意】一定要用 Object.seal() 否则会报错this.editor = Object.seal(editor); }},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = "<p>Ajax 异步设置内容 HTML</p>";}, 1500);},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！},
};
</script>

基本配置就OK了。
基本上运行能看到下面的框.
在这里插入图片描述

4、个性化参数配置

上传调用后台接口配置

框框出来了，你发现上传图片会提示下面错误：
在这里插入图片描述
原因是需要配置上传路径地址。

根据官方的说法，直接配置对应的参数即可

官方上传图片传送门
可以参考下官方的这个Demo
上传图片官方Demo

editorConfig: {//菜单配置MENU_CONF: {// 配置上传图片uploadImage: {//server必须要配置正确server: '/api/upload',...}}}

编辑器配置

工具栏配置

其它常用功能

有的时候需要清除历史数据，这样处理的话主要是方便进行重新赋值。
Clear()方法进行重置

this.editor.clear()方法就可以清空编辑器内容。
this.editor.setHtml()设置内容。

5、基础样式调整

(1)添加边框
样式调整写的稍微有点模糊，需要自己慢慢定位下。
最外层的样式如下：

style="border: 1px solid #1890ff"

最外层包括Toolbar和Editor两个组件。

(2)图片编辑框调整
图片的样式默认是没有高亮，如果需要高亮，需要对现在的样式进行调整。
代码如下：

 .editor >>> .w-e-text-container{.w-e-hover-bar{/* 选中图片样式样式覆盖*/border: 1px solid #1890ff;color: #1890ff;}.w-e-modal {/* 弹框边框样式覆盖 */border: 1px solid #1890ff;}.w-e-modal  button {/* 弹框按钮样式覆盖 */background-color: #1890ff;color: #fff;}}

6、代码

全部代码如下：

editor配置参数：

<template><div><div style="border: 1px solid #ccc; margin-top: 10px"><!-- 工具栏 --><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig"/><!-- 编辑器 --><Editorstyle="height: 400px; overflow-y: hidden":defaultConfig="editorConfig"v-model="html"@onChange="onChange"@onCreated="onCreated"/></div> </div>
</template>
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";export default {name: "MyEditor",components: { Editor, Toolbar },data() {return {editor: null,html: "<p>hello&nbsp;world</p>",toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],// excludeKeys: [ /* 隐藏哪些菜单 */ ],},editorConfig: {placeholder: "请输入内容...",pasteFilterStyle: false,zIndex: 12000,//看这里//-----------------------------------MENU_CONF: {// 配置上传图片uploadImage: {//server必须配置server: process.env.VUE_APP_API_BASE_URL + "/api/upload",// 最多可上传几个文件，默认为 100maxNumberOfFiles: 10,// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: [],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。fieldName: "file",meta: {//官网中把token放到了这里，但是请求的时候会看不到token},headers: {//token放这里 getUserToken()这个方法需要自己实现Authorization: "Bearer " + getUserToken(),},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 跨域是否传递 cookie ，默认为 falsewithCredentials: false,// 超时时间，默认为 10 秒timeout: 5 * 1000, // 5 秒customInsert(res, insertFn) {// 从 res 中找到 url alt href ，然后插图图片// res 是上传后，从后端返回的结果集。具体根据返回对象进行设置。if(res.code===200){const imageObj=res.data[0]insertFn(imageObj.url, imageObj.name, imageObj.url)}},},},mode:"default",// "simple",}};},methods: {onCreated(editor) {this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错},},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = "<p>Ajax 异步设置内容 HTML</p>";}, 1500);},beforeDestroy() {const editor = this.editor;if (editor == null) return;editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！},
};
</script>