解决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函数名与form表单元素同名冲突的问题
Mar 07 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
javascript实现多边形碰撞检测
Oct 24 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
isset和empty的区别
2007/01/15 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php网页病毒清除类
2014/12/08 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
Python和C/C++交互的几种方法总结
2017/05/11 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
银行贷款委托书范本
2014/10/11 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL