您的位置:88bifa必发唯一官网 > 必发88首页 > 一派当图片太大的时候富文本的剧情

一派当图片太大的时候富文本的剧情

发布时间:2019-06-11 01:24编辑:必发88首页浏览(121)

    问题描述

      项目使用的vue2.0开发,项目中需要一个富文本编辑器,楼主经过一番心理挣扎选择了vue-quill-editor。具体如何引用作者在项目中已经写得很明白了,我在这里就不再赘述。
      vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,楼主是将内容存在数据库中的,这样一来,一方面会占用大量的数据库存储空间,另一方面当图片太大的时候富文本的内容,会超过数据库的存储上限,从而会产生内容被截断从而显示不全的问题(即使是text类型,也有存储上限65535)。
      那么问题来了,如何将图片上传到自己的服务器或第三方服务,然后将获得的图片url插入到文本中呢?我认为大致有两个方法,其一是将任务交给服务端,服务端截取base64图片并转化为文件,将其路径或者url替换原来的图片数据;其二是对控件本身下手,首先将图片上传,然后插入到富文本中。接下来楼主就开始了自己的踩坑之路。

    解决方案

    基础简介

    1.vue-quill-editor是基于quill(github地址)适用于Vue2的富文本编辑器,所以对于quill的原生属性扩展也是支持的。quill文档地址

    2.quill 中有许多扩展和自定义方法功能。比如图片的重定义大小、图片上传的点击处理等。

    图片上传

    通过查看quill项目issue。发现其中是有对图片上传这方面问题进行考虑和修改的。所以图片上传这个方案是可行的。接下来就是如何实现。

    3.首先我们需要在项目中拿到quill的实例。这个在vue-quill-editor项目中有介绍如何获取。基本方法就是通过ref获取你的vue-quill-editor实例,再获取quill实例,代码如下。其中newEditor就是我的vue-quill-editor

     this.$refs.newEditor.quill

    4.在拿到实例后我们需要考虑如何图片上传并将url插入文本中。通过查找发现可以注册一个自定义的图片处理函数,当顶部的工具栏中的图片按钮被点击的时候,就会触发这个函数。然而在实际使用中你会发现这个函数并不像文档中所说的接收(image, callback)两个参数,image是你的图片,你只需要在callback中将传入处理后的url就可以。而是接收一个参数state,当被点击时就会触发这个函数,并传入state值----true。这里首先介绍一下,如何注册这个处理函数-imgHandler。这里要注意,注册函数要写在mounted生命周期钩子里。

    mounted() {
    var vm =this
     var imgHandler = async function(state) {
     if (state) {
      //button is clicked
     }
     }
     vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
    }
    

    5.通过在stackflow查阅,发现就只能在imgHandler中自己实现点击上传和插入的功能。这样就在editor下面写一个不显示的input,并监听变化上传图片,获取其实例,当imgHandler被点击时,模拟input按钮被点击。代码变成如下示例。

     mounted() {
      var vm =this
      var imgHandler = async function(image) {
      vm.addImgRange = vm.$refs.newEditor.quill.getSelection()
      if (image) {
       var fileInput = document.getElementById(vm.uniqueId) //隐藏的file文本ID
       fileInput.click() //加一个触发事件
      }
      }
      vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
     }
    

    6.最后是input的点击上传和图片url的插入。

    HTML代码

     <div
      v-loading="imageLoading"
      element-loading-text="请稍等,图片上传中">
      <quill-editor
      ref="newEditor"
      :options="newOption"
      style="height: 200px; margin-bottom: 54px"
      v-model="editorContent"
      @change="editorChange">
      </quill-editor>
      <form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">
      <input style="display: none" :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!--style="display: none"-->
      </form>
     </div>
    

    vue代码

     uploadImg: async function(id) {
       var vm = this
       vm.imageLoading = true
       var formData = new FormData($('#'   id)[0])
       try {
       const url = await vm.uploadImgReq(formData)// 自定义的图片上传函数
       if (url != null && url.length > 0) {
        var value = url
        vm.addImgRange = vm.$refs.newEditor.quill.getSelection()
        value = value.indexOf('http') != -1 ? value : 'http:'   value
        vm.$refs.newEditor.quill.insertEmbed(vm.addImgRange != null?vm.addImgRange.index:0, 'image', value, Quill.sources.USER)
       } else {
        vm.$message.warning("图片增加失败")
       }
       document.getElementById(vm.uniqueId).value=''
       } catch ({message: msg}) {
       document.getElementById(vm.uniqueId).value=''
       vm.$message.warning(msg)
       }
       vm.imageLoading = false
      },
    

    到这里就大功告成啦。如果有什么错误、问题或者更好的解决方案欢迎指正讨论~
    最后,在解决这个问题的时候,顺便把ImageResize集成到了控件中。具体实现比较简单可以参考vue-quill-editor中的demo示例

     import Quill from 'quill'
     import { ImageResize } from '../modules/ImageResize.js'
     Quill.register('modules/imageResize', ImageResize)
    

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

    您可能感兴趣的文章:

    • Vue axios 中提交表单数据(含上传文件)
    • vue.js 上传图片实例代码
    • 基于VUE选择上传图片并页面显示(图片可删除)
    • Vue.js 2.0 移动端拍照压缩图片上传预览功能
    • vue中用H5实现文件上传的方法实例代码
    • vue webuploader 文件上传组件开发
    • vue.js异步上传文件前后端实现代码
    • 使用vue构建一个上传图片表单
    • vue项目中使用axios上传图片等文件操作
    • vue实现文件上传功能

    本文由88bifa必发唯一官网发布于必发88首页,转载请注明出处:一派当图片太大的时候富文本的剧情

    关键词: 必发88首页

上一篇:支付进度中必要用到图片轮播的插件

下一篇:没有了