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 相关文章推荐
js实现日期级联效果
Jan 23 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
vue+iview实现分页及查询功能
Nov 17 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生成WAP页面
2006/10/09 PHP
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python数学形态学实例分析
2019/09/06 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Django异步任务线程池实现原理
2019/12/17 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
销售心得体会
2014/01/02 职场文书
商业融资计划书
2014/04/29 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
Go中的条件语句Switch示例详解
2021/08/23 Golang
Java spring定时任务详解
2021/10/05 Java/Android
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python