Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)


Posted in Javascript onMay 15, 2020

使用教程(注意细看总结部分,写了几点,希望有所帮助):
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(含图片自定义上传服务、清除复制粘贴样式等)的文章就介绍到这了,更多相关vue富文本编辑器Vue-Quill-Editor内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
Node.js API详解之 dns模块用法实例分析
May 15 #Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 #Javascript
js实现简单贪吃蛇游戏
May 15 #Javascript
Javascript执行流程细节原理解析
May 14 #Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 #Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 #Javascript
You might like
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP二维数组去重算法
2016/12/17 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
python中正则表达式的使用详解
2014/10/17 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python实现随机爬山算法
2021/01/29 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
竞选班委演讲稿
2014/04/28 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
英文导游词
2015/02/13 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技