vue条件编辑器（「实践」Vue项目中标配编辑器插件Vue-Quill-Editor）

首页教程更新时间：2023-05-21 23:58:18

vue条件编辑器,「实践」Vue项目中标配编辑器插件Vue-Quill-Editor(1)

作者：狂奔的蜗牛

转发链接：https://segmentfault.com/a/1190000022646661

开始

使用教程(注意细看总结部分，写了几点，希望有所帮助)：

1、安装插件：npm install vue-quill-editor(或者yarn add vue-quill-editor)

2、安装插件依赖：npm install quill(或者yarn add quill)

3、main.js文件中引入：

import Vue from 'vue' 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) new Vue({ VueQuillEditor, render: h => h(App), }).$mount('#app')

4、vue页面中使用(代码完整，复制就能使用)：

<template> <div id="quillEditorId"> <el-upload class="avatarUploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <quill-editor id="myQuillEditorId" ref="myQuillEditor" v-model="ruleForm.editeContent" :options="editorOption" @change="handelEditorChange($event)" > </quill-editor> </div> </template> <script> const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线 ['blockquote', 'code-block'], //引用、代码块儿 [{ header: 1 }, { header: 2 }], //标题，键值对的形式；1、2表示字体大小 [{ list: 'ordered' }, { list: 'bullet' }], //列表 [{ script: 'sub' }, { script: 'super' }], //上下标 [{ indent: '-1' }, { indent: ' 1' }], //缩进 [{ direction: 'rtl' }], //文本方向 [{ size: ['small', false, 'large', 'huge'] }], //字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 [{ color: [] }, { background: [] }], //字体颜色，字体背景颜色 [{ font: [] }], //字体 [{ align: [] }], //对齐方式 ['clean'], //清除字体样式 ['image'], //上传图片、上传视频(video)、超链接(link) ] export default { data() { return { imageUrl: '', editeContent: '', editorOption: { modules: { clipboard: { // 粘贴版，处理粘贴时候的自带样式 matchers: [[Node.elEMENT_NODE, this.HandleCustomMatcher]], }, toolbar: { container: toolbarOptions, // 工具栏 handlers: { image: function(value) { if (value) { // 获取隐藏的上传图片的class，不一定是.el-icon-plus。触发上传图片事件 document.querySelector('.el-icon-plus').click() } else { this.quill.format('image', false) } }, }, }, }, placeholder: '', }, } }, computed: {}, async mounted() {}, methods: { handleAvatarSuccess(res, file) { // 图片上传成功后的回调 console.log(res, file) }, beforeAvatarUpload(data) { // 思路：上传图片至服务后，拿到返回的图片地址。直接创建image标签插入光标所在的位置 // 图片上传服务(本地服务或者阿里云服务) // 获取富文本组件实例 let quill = this.$refs.myQuillEditor.quill // 上传服务成功后，按根据光标位置把图片插入编辑器中 if (data.url) { // 获取光标所在位置,data.url表示上传服务后返回的图片地址 let length = quill.getSelection().index // 插入图片，data.url为服务返回的图片链接地址 quill.insertEmbed(length, 'image', data.url) // 调整光标到最后 quill.setSelection(length 1) } else { this.$message.closeAll() this.$message.error('图片插入失败') } }, handelEditorChange(el) { console.log(el, 'el') }, HandleCustomMatcher(node, Delta) { // 文字、图片等，从别处复制而来，清除自带样式，转为纯文本 let ops = [] Delta.ops.forEach(op => { if (op.insert && typeof op.insert === 'string') { ops.push({ insert: op.insert, }) } }) Delta.ops = ops return Delta }, }, } </script> <style scoped lang="scss"> #quillEditorId { .avatarUploader { display: none; // 隐藏上传图片组件 } } </style>总结：

1、变量toolbarOptions表示自定义的工具栏，可以参照官网(官网写的比较简单)或者细看本文代码(有详细注释)；

2、如果不单独处理图片，图片会被直接转义成base64，跟随DOM一块儿上传服务；

3、本文对图片做了自定义处理，选择本地图片时，会单独上传到服务，返回地址后，直接插入到富文本编辑中的当前节点。看代码中editorOption的handlers的image函数，以及插入富文本编辑器当前光标函数beforeAvatarUpload，代码中有详细注释；

4、粘贴板，变量clipboard。如果需要清理复制的自带样式，使用粘贴板进行清理，函数HandleCustomMatcher；5、对于复制粘贴的情况，多说一句。过程中，编辑器已经将原有的DOM转为编辑器允许存在的DOM元素，所以这块儿不用再处理(处理起来，也会有点复杂)。

推荐Vue学习资料文章：

《》