解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题


Posted in Javascript onAugust 20, 2018

vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor。

vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把

但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富文本的内容也是异常的大的,这就会给大家带来一些烦恼,我们可能更希望在提交富文本的内容的时候图片只是以图片地址提交,那这样一来我们要怎么去处理呢,接下来大家可以来理一理

还是老思路,既然我们可以希望不是直接将图片转成base64,那么我们可以采用选择完图片,即将图片上传服务器,服务器返回相应的图片链接,前端将图片链接插入到富文本的指定光标上即可,这样一来就可以实现我们的想要的效果了

首先,新建富文本组件QuillEditor.vue,利用iview的上传组件来上传选择完的图片(当然,其他的上传组件也是ok的)

<Upload
    id="iviewUp"
     ref="upload"
     :show-upload-list="false"
     :on-success="handleSingleSuccess"
     :format="['jpg','jpeg','png']"
     :max-size="2048"
     :headers="header"
     :on-format-error="handleFormatError"
     :before-upload="handleBeforeUpload()"
     type="drag"
     :action="serverUrl"
     style="display: none;width:0">
     <div style="width: 0">
       <Icon type="ios-camera" size="50"></Icon>
     </div>
   </Upload>
   <!--<Row>-->
    <quill-editor 
     v-model="detailContent" 
     ref="myQuillEditor" 
     :options="editorOption" 
     @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
     @change="onEditorChange($event)">
    </quill-editor>
   <!--</Row>-->

看到上面的代码有的的就会有疑问了,那上传好的图片要怎么插到富文本的指定光标里面呢,别慌,面包会有的,往下看,

handleSingleSuccess (res, file) {
   // res为图片服务器返回的数据
   // 获取富文本组件实例
   let vm = this
   let quill = this.$refs.myQuillEditor.quill
   console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
   // 如果上传成功
   if (res.res_code === '1') {
     // 获取光标所在位置
     let length = quill.getSelection().index;
     // 插入图片 res.info为服务器返回的图片地址
     quill.insertEmbed(length, 'image', res.result.url)
     // 调整光标到最后
     quill.setSelection(length + 1)
   } else {
     vm.$Message.error('图片插入失败')
   }
   // loading动画消失
   this.quillUpdateImg = false
  }

通过 this.$refs.myQuillEditor.quill.getSelection().index获取光标所在位置,将图片地址放在该位置即可

这样一来万事俱备,只欠东风了,这个时候大家会发现,那iview这个上传组件在页面上呢,我怎么实现点击富文本上的上传图片的按钮调用iview的上传组件的方法呢,

这个时候我们就要用到富文本中的配置属性editorOption,对editorOption进行图片上传的点击事件进行相应的配置即可,详情看下面代码

editorOption: { // 富文本框配置
     placeholder: '',
     theme: 'snow', // or 'bubble'
     modules: {
       toolbar: {
         container: toolbarOptions, // 工具栏
         handlers: {
           'image': function (value) {
 

if (value) {
               document.querySelector('#iviewUp input').click()
             } else {
               this.quill.format('image', false);
             }
           }
         }
       }
     }
   }

 document.querySelector('#iviewUp input') 这个就是相应的dom节点的点击事件,将其绑在富文本的图片按钮点击事件上好了,基本上大功告成。还是算比较简单的,希望可以供大家参考

总结

以上所述是小编给大家介绍的解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Vue2.0生命周期的理解
Aug 20 #Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 #Javascript
RequireJS用法简单示例
Aug 20 #Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 #Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 #Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 #Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 #Javascript
You might like
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python实现日常记账本小程序
2018/03/10 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
青年创业培训欢迎词
2014/01/10 职场文书
单位办理社保介绍信
2014/01/10 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
golang 实现并发求和
2021/05/08 Golang