详解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 相关文章推荐
jquery简单体验
Jan 10 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
初识Node.js
Mar 20 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
微信小程序静默登录的实现代码
Jan 08 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
聊天室php&amp;mysql(一)
2006/10/09 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python 字典中的所有方法及用法
2020/06/10 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
双十佳事迹材料
2014/01/29 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书