您好,登录后才能下订单哦!
这篇文章主要为大家展示了Vue如何使用富文本编辑器Vue-Quill-Editor,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
使用教程(注意细看总结部分,写了几点,希望有所帮助):
1、安装插件:npm install vue-quill-editor
2、安装插件依赖:npm install 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如何使用富文本编辑器Vue-Quill-Editor的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。