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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
js内置对象 学习笔记
Aug 01 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 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写的简易聊天室代码
2011/06/04 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python实现杨辉三角思路
2017/07/14 Python
浅谈Django REST Framework限速
2017/12/12 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
关于运动会的稿件
2014/02/02 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
律政俏佳人观后感
2015/06/09 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
MySQL 时间类型的选择
2021/06/05 MySQL
学习nginx基础知识
2021/09/04 Servers
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技