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 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
vue实现顶部菜单栏
Nov 08 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
用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获取301跳转URL简单实例
2013/12/16 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
Convert Seconds To Hours
2007/06/16 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JS实现复制功能
2017/03/01 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
python文件和文件夹复制函数
2020/02/07 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
园林施工员岗位职责
2013/12/11 职场文书
《小池塘》教学反思
2014/02/28 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
SSM VUE Axios详解
2021/10/05 Vue.js
python 详解turtle画爱心代码
2022/02/15 Python