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

 更新时间:2019年04月24日 14:11:08   作者:大盘鸡拌面  
这篇文章主要介绍了详解vue中使用vue-quill-editor富文本小结(图片上传),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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属性里面的变量就不会报错了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。

相关文章

  • 基于vue-seamless-scroll实现无缝滚动效果

    基于vue-seamless-scroll实现无缝滚动效果

    这篇文章主要为大家详细介绍了基于vue-seamless-scroll实现无缝滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中关于computed的this指向问题

    vue中关于computed的this指向问题

    这篇文章主要介绍了vue中关于computed的this指向问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue实现虚拟列表组件解决长列表性能问题

    vue实现虚拟列表组件解决长列表性能问题

    这篇文章主要介绍了在vue中实现虚拟列表组件,解决长列表性能问题,本文给大家分享实现思路及实例代码,需要的朋友可以参考下
    2022-07-07
  • vue项目同时兼容pc和移动端的解决方式

    vue项目同时兼容pc和移动端的解决方式

    我们经常在项目中会有支持pc与手机端需求,下面这篇文章主要给大家介绍了关于vue项目同时兼容pc和移动端的解决方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 详解vue使用Echarts画柱状图

    详解vue使用Echarts画柱状图

    这篇文章主要为大家介绍了vue使用Echarts画柱状图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue项目保存代码之后页面自动更新问题

    Vue项目保存代码之后页面自动更新问题

    这篇文章主要介绍了Vue项目保存代码之后页面自动更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

    Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

    突然接到公司需求,说客户想让我们把项目直接打包,所以下面这篇文章主要给大家介绍了关于Vue项目打包成exe可执行文件的实现过程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue3.0插件执行原理与实战

    Vue3.0插件执行原理与实战

    这篇文章主要介绍了Vue3.0插件执行原理与实战,Vue项目能够使用很多插件来丰富自己的功能Vue-Router、Vuex等,节省了我们大量的人力和物力,下面我们就一起来了解Vue3.0插件的原理吧,需要的小伙伴可以参考一下
    2022-02-02
  • Vue?服务端渲染SSR示例详解

    Vue?服务端渲染SSR示例详解

    这篇文章主要介绍了Vue?服务端渲染SSR示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue3 table表格组件的使用

    Vue3 table表格组件的使用

    这篇文章主要介绍了Vue3 table表格组件的使用,文章围绕table表格组件是如何使用的相关资料展开详细内容,需要的朋友可以参考一下
    2021-11-11

最新评论

?


http://www.vxiaotou.com