详解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 THICKBOX弹出层插件
Aug 30 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
vue中 v-for循环的用法详解
Feb 19 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
关于python写入文件自动换行的问题
2018/06/23 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
儿科护理实习自我鉴定
2013/09/19 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
英文推荐信格式范文
2014/05/09 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
导游词之临安白水涧
2019/11/05 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
一行Python命令实现批量加水印
2022/04/07 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python