详解vue中使用vue-quill-editor富文本小结(图片上传)


Posted in Javascript onApril 24, 2019

vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余,通常来讲,每个服务器端接收的post的数据大小都是有限制的,这样的话有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器。

1.下载Vue-Quill-Editor

npm install vue-quill-editor --save

2.下载quill(Vue-Quill-Editor需要依赖)

npm install quill --save

3.使用

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

本次使用到了富文本的封装和上传图片,因要求使用element-ui框架,我上传图片的时候选择了element-ui的Upload上传组件将图片上传到服务器。再将图片链接插入到富文本中,以达到最优的体验。

子组件中将改变的值,直接发送给父组件,父组件来完成逻辑处理

<template>
 <div>
  <el-upload      //直接隐藏掉就好了,用功能不用样式
   v-show="false"
   id="quill-upload"
   action="/api/product/upload.do"
   name="upload_file"
   multiple
   :limit="3"
   list-type="picture"
   :show-file-list="false"
   :before-upload="beforeUpload"
   :on-error="uploadError"
   :on-success="handleExceed">
   <el-button size="small" type="primary" ></el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  </el-upload>
  <el-row v-loading="uillUpdateImg">
   <quillEditor
    ref="myQuillEditor"
    @change="onEditorChange($event)"
    v-model="value"
    :options="editorOption"/>
  </el-row>
 </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
 name: "richText",
 components:{quillEditor},
 props:['content'],               //父组件传过来的,将传过来的渲染到富文本编辑器
 data(){
  return{
   uillUpdateImg:false,            //根据图片上传状态来确定是否显示loading动画
   serverUrl:'', //上传的图片服务器地址
   value:this.content,             //富文本内容
   editorOption: {               //符文本编辑器的配置
    placeholder: '',
    theme: 'snow',
    modules: {
     toolbar: {
      container: [             // 工具栏配置, 默认是全部
       ['bold'],
       ['italic'],
       ['underline'],
       ['strike'],
       [{'list':'ordered'},{'list': 'bullet' }],
       ['blockquote'], ['code-block'],
       ['link'],
       ['image'],
       [{'list': 'ordered'}, {'list': 'bullet'}],
      ],
      handlers: {
       'image': function (value) {
        if (value) {
         // 给个点击触发Element-ui,input框选择图片文件
         document.querySelector('#quill-upload input').click()
        } else {
         this.quill.format('image', false);
        }
       }
      }
     }
    }
   }
  }
 },
 methods:{
  onEditorChange({ quill, html, text }) {   //富文本编辑器内容发生改变的时候
   this.value = html
   this.$emit('textChange',html)       //将富文本编辑器输入的文本发送给父组件,父组件涉及提交添加或者更改
  },
  beforeUpload(){               //上传图片之前开启loading
   this.uillUpdateImg = true
  },
  uploadError(){               //图片上传失败,关闭loading
   this.uillUpdateImg = false
   this.$message.error('图片插入失败')
  },
  handleExceed(response, file, fileList){   //图片添加成功
   let quill = this.$refs.myQuillEditor.quill
   console.log(response)
   if (response.status === 0) {
    let length = quill.getSelection().index;
    // 插入图片 response.data.url为服务器返回的图片地址
    quill.insertEmbed(length, 'image', response.data.url)
    // 调整光标到最后
    quill.setSelection(length + 1)
   }else{
    this.$message.error('图片插入失败')
   }
   this.fileList = fileList
   this.uillUpdateImg = false
  },
 }
}
</script>
<style scoped>
</style>

配置中的handlers是用来定义自定义程序的,然而我们配置完后会懵逼地发现,整个富文本编辑器的工具栏的图片上传等按钮都不见了 只保留了几个基本的富文本功能。

这个是因为添加自定义处理程序将覆盖默认的工具栏和主题行为

因此我们要再自行配置下我们需要的工具栏,所有功能的配置如下,大家可以按需配置,这里看起来一大堆,也不美观,大家也可以配置一个单独的config文件引入。

有一点注意的地方,父组件中传入子组件中的值,子组件里面发生改变以后再传给父组件。将变量时存放在props属性中的,我们在调用变量的时候是跟data里面的变量一样的,都是通过this.变量来调用,这个问题就是说父组件传入子组件的变量是不能this.变量直接改变的,要在data或者computed属性里面重新定义一个变量,或者监听props接受变量的变化。改变data或者computed属性里面的变量就不会报错了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
vue中的inject学习教程
Apr 24 #Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 #Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 #Javascript
vue模仿网易云音乐的单页面应用
Apr 24 #Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 #Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP安全编程之加密功能
2006/10/09 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Python星号*与**用法分析
2018/02/02 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
异常和异常类的概念
2014/09/12 面试题
金鑫耀Java笔试题
2014/09/06 面试题
四种会话跟踪技术
2015/05/20 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
小学毕业感言500字
2014/02/28 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
python实现会员信息管理系统(List)
2022/03/18 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫