解决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 相关文章推荐
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
原生js实现随机点名
Jul 05 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中用文本文件做数据库的实现方法
2008/03/27 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
js字符串转成JSON
2013/11/07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python3编码问题汇总
2016/09/06 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
党建工作经验交流材料
2014/05/25 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
电影开国大典观后感
2015/06/04 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang