详解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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
javascript中获取选中对象的类型
Apr 02 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
微信小程序实现的图片保存功能示例
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
Windows下的PHP安装pear教程
2014/10/24 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
js 颜色选择插件
2017/01/23 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
详解a++和++a的区别
2017/08/30 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JavaScript数组去重实现方法小结
2020/01/17 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
使用vue构建多页面应用的示例
2020/10/22 Javascript
Python生成随机MAC地址
2015/03/10 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
创建Django项目图文实例详解
2019/06/06 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
跟单文员的岗位职责
2013/11/14 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
车辆委托书范本
2014/10/05 职场文书
党员个人年度总结
2015/02/14 职场文书
中学社团活动总结
2015/05/07 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
python中validators库的使用方法详解
2022/09/23 Python