共计 6806 个字符，预计需要花费 18 分钟才能阅读完成。
wangEditor 性能比拟全，而且容易上手，过后本地单机玩的还不错，无奈迁徙到我的项目报编译谬误，找了很多办法都没有解决，于是痛定思痛决定换插件，在试了几款富文本插件均报错的状况下无心中尝试 quill 富文本，惊喜发现竟然没报错，开心之余却发现它的的 API 不全，实现罕用的性能都得本人封装，于是乎踏上漫漫踩坑之路，明天特意抽空总结下，心愿能给饱受折磨的兄弟们一点帮忙~~~
留神 1：quill 默认的图片上传办法限度图片大小，几兆的图片间接报错，所以采纳 elementUI 的图片上传组件将图片先上传到本地，再赋值给 Qill-Editor 的图片相干函数
留神 2：字体款式配置，富文本工具栏配置，下面有哪些项就对应富文本下面的项，在这里能够把不须要
的富文本项去掉
modules 外面对 toolbar 的选项能够在 handlers 外面增加操作函数，如图片上传，咱们能够给 "image"
属性增加图片上传函数，再通过参数 value 判断用户是否有图片上传操作，如果有，间接调用 upload 的
点击事件进行图片上传(前面具体介绍图片上传参数和办法)
图片上传参数配置，留神：这里是 upload 插件上传图片，所以参数配置还是跟 elementUI 的 upload 组件
用法一样，要配置申请头，申请地址和申请参数
留神，先测试图片上传是否胜利，upload 组件用法大家应该都相熟了就不赘述，还是揭示一句，先得保障
本人本地图片上传胜利再来测试在 QUILL 外面图片上传性能，咋们先得保障服务器图片上传没问题，如果
本地是胜利的，在 quill 上传图片出问题排查也更容易main.js 外面的配置：
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);分享结束，以下是残缺代码
<template>
<div>
<!-- 图片上传组件辅助 -->
<!-- 留神 quill 默认的图片上传办法限度图片大小，几兆的图片间接报错，所以采纳 elementUI 的图片上传组件将图片先上传到本地，再赋值到 Qill-Editor 的图片上传函数中 -->
<el-upload
class="uploaders"
multiple
:limit="5"
:action="serverUrl"
:headers="header"
:data="data"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
>
</el-upload>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
class="ql-snow ql-editor">
</quill-editor>
</div>
</template>
<script>
import Quill from "quill";
let fontSizeStyle = Quill.import("attributors/style/size");// 引入后能够在 css 上写款式笼罩原来的默认字体款式
fontSizeStyle.whitelist = [ // 注入 whitelist 款式配置 间接把富文本的默认字体设置改为以下配置，然而要联合 CSS 定义的类款式应用，否则字体大小设置不失效
"18px",
"20px",
"22px",
"24px",
"26px",
"28px",
"30px",
"32px"
];
Quill.register(fontSizeStyle, true);// 注册定义的款式
const toolbarOptions = [["bold", "italic", "underline"],
[{header: 1}, {header: 2}],
[{list: "ordered"}, {list: "bullet"}],
[{indent: "-1"}, {indent: "+1"}],
[{direction: "rtl"}],
[{size: fontSizeStyle.whitelist}],// 应用自定义的款式 留神前面 CSS 外面要有款式对应，否则字体大小设置不失效
[{header: [1, 2, 3, 4, 5, 6, false] }],
[{color: [] }],
[{font: [] }],
[{align: [] }],
["link", "image"]
]
export default {
props: {
editorValue: {type: [Number, Object, Array, String],
default: ''
}
},
data() {
return {
quillUpdateImg: false, // 依据图片上传状态来确定是否显示 loading 动画，刚开始是 false, 不显示
content: null,// 富文本内容
editorOption: {// 富文本配置
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,
handlers: {'image': function (value) {if (value) {
// 触发 upload 抉择图片文件
document.querySelector('.uploaders input').click()} else {// formate('name',value) 这里是设置图片为空
this.quill.format('image', false);
}
}
}
}
}
},
serverUrl: '', // 这里写你要上传的图片服务器地址
header: { // 这里是把图片上传到你我的项目服务器时的申请头配置
Authorization: '',// 申请头的参数
TenantKey: ''// 申请头的参数
},
data: { // 这里是把图片上传到你我的项目服务器时的申请参数配置，本我的项目后盾只需传 type:4, 大家依据本人的吸纳灌木配置
type: ''
},
}
},
mounted(){this.content= this.editorValue},
methods: {onEditorChange({editor, html, text}) {// 实时监听富文本内容扭转
this.content = html
this.$emit('getSonContent', html)// 这里将富文本的残缺内容传给父组件
},
// 富文本图片上传前
beforeUpload() {
// 显示 loading 动画
this.quillUpdateImg = true
},
uploadSuccess(res, file) {// 留神这里是 upload 的图片上传函数，// 不是 quill 外部的图片上传函数，所以用法跟 element 的图片上传组件统一
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 如果上传胜利
if (res.resultCode == 200) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.resultData.fileUrl 为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.resultData.fileUrl)
// 调整光标到最初
quill.setSelection(length + 1)
} else {this.$message.error('图片插入失败')
}
// loading 动画隐没
this.quillUpdateImg = false
},
// 富文本图片上传失败
uploadError() {
// loading 动画隐没
this.quillUpdateImg = false
this.$message.error('图片插入失败')
}
}
}
</script>
<style lang="scss" >
.uploaders{display: none;}
.ql-container.ql-snow {
line-height: normal !important;
height: 250px !important;
font-size: 14px;
}
.ql-snow {.ql-tooltip[data-mode="link"]::before {content: "请输出链接地址:";}
.ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保留";
padding-right: 0px;
}
.ql-tooltip[data-mode="video"]::before {content: "请输出视频地址:";}
.ql-picker.ql-size {.ql-picker-label[data-value="12px"]::before,
.ql-picker-item[data-value="12px"]::before {content: "12px";}
.ql-picker-label[data-value="14px"]::before,
.ql-picker-item[data-value="14px"]::before {content: "14px";}
.ql-picker-label[data-value="16px"]::before,
.ql-picker-item[data-value="16px"]::before {content: "16px";}
.ql-picker-label[data-value="18px"]::before,
.ql-picker-item[data-value="18px"]::before {content: "18px";}
.ql-picker-label[data-value="20px"]::before,
.ql-picker-item[data-value="20px"]::before {content: "20px";}
.ql-picker-label[data-value="22px"]::before,
.ql-picker-item[data-value="22px"]::before {content: "22px";}
.ql-picker-label[data-value="24px"]::before,
.ql-picker-item[data-value="24px"]::before {content: "24px";}
.ql-picker-label[data-value="26px"]::before,
.ql-picker-item[data-value="26px"]::before {content: "26px";}
.ql-picker-label[data-value="28px"]::before,
.ql-picker-item[data-value="28px"]::before {content: "28px";}
.ql-picker-label[data-value="30px"]::before,
.ql-picker-item[data-value="30px"]::before {content: "30px";}
.ql-picker-label[data-value="32px"]::before,
.ql-picker-item[data-value="32px"]::before {content: "32px";}
.ql-picker-label[data-value="34px"]::before,
.ql-picker-item[data-value="34px"]::before {content: "34px";}
.ql-picker-label[data-value="36px"]::before,
.ql-picker-item[data-value="36px"]::before {content: "36px";}
}
.ql-picker.ql-header {
.ql-picker-label::before,
.ql-picker-item::before {content: "文本";}
.ql-picker-label[data-value="1"]::before,
.ql-picker-item[data-value="1"]::before {content: "题目 1";}
.ql-picker-label[data-value="2"]::before,
.ql-picker-item[data-value="2"]::before {content: "题目 2";}
.ql-picker-label[data-value="3"]::before,
.ql-picker-item[data-value="3"]::before {content: "题目 3";}
.ql-picker-label[data-value="4"]::before,
.ql-picker-item[data-value="4"]::before {content: "题目 4";}
.ql-picker-label[data-value="5"]::before,
.ql-picker-item[data-value="5"]::before {content: "题目 5";}
.ql-picker-label[data-value="6"]::before,
.ql-picker-item[data-value="6"]::before {content: "题目 6";}
.ql-picker-label[data-value="7"]::before,
.ql-picker-item[data-value="7"]::before {content: "题目 7";}
}
.ql-picker.ql-font {.ql-picker-label[data-value="SimSun"]::before,
.ql-picker-item[data-value="SimSun"]::before {
content: "宋体";
font-family: "SimSun" !important;
}
.ql-picker-label[data-value="SimHei"]::before,
.ql-picker-item[data-value="SimHei"]::before {
content: "黑体";
font-family: "SimHei";
}
.ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-picker-item[data-value="Microsoft-YaHei"]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
.ql-picker-label[data-value="KaiTi"]::before,
.ql-picker-item[data-value="KaiTi"]::before {
content: "楷体";
font-family: "KaiTi" !important;
}
.ql-picker-label[data-value="FangSong"]::before,
.ql-picker-item[data-value="FangSong"]::before {
content: "仿宋";
font-family: "FangSong";
}
}
}
</style>小结：
1. 图片太大倡议用 upload 组件先将图片上传到服务器，再将数据读取赋值给 quill-editor 图片，否则图片太大间接上传失败
2. 对于字体大小等相干配置，网上看到一些敌人说间接找到插件的 whitelist 属性批改，如果是本地测试能够，上线不可能还跑到依赖包文件间接找到相干代码批改，倡议本地配置白名单注入，再写款式笼罩
3. 留神源码开端的对于 Quill 的 CSS 要加上，否则咱们配置的字体款式设置不失效
4. 图片上传先确保上传到本人我的项目服务器是好的，再放到 quill-editor 外面调试
周末抽空做了个总结，心愿能帮到大家，程度无限不足之处欢送斧正~~
正文完
发表至： javascript
2022-05-28
