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实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
angular4自定义组件详解
Sep 28 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 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 数组遍历顺序理解
2009/09/09 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
java解析json方法总结
2019/05/16 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
开始着手第一个Django项目
2015/07/15 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
详解python logging日志传输
2020/07/01 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
Java中实现多态的机制
2015/08/09 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
物理课外活动总结
2014/08/27 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python