解决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 escape,unescape解决中文乱码问题的方法
May 26 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
vue组件与复用详解
Apr 08 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP线程的内存回收问题
2016/07/08 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
python实现数据库跨服务器迁移
2018/04/12 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python与C/C++的相互调用案例
2021/03/04 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
村官学习十八大感想
2014/01/15 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
优秀护士先进事迹
2014/05/08 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
python标准库ElementTree处理xml
2022/05/20 Python