解决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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
详解vuex状态管理模式
Nov 01 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 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 变量未定义等错误的解决方法
2011/01/12 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
javascript 动态创建表格
2015/01/08 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
四年大学生活的个人自我评价
2013/12/11 职场文书
如何写好升职自荐信
2014/01/06 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
事业单位请假制度
2014/01/13 职场文书
妇产医师自荐信
2014/01/29 职场文书
大学生找工作求职信
2014/07/09 职场文书
幼儿园辞职信
2015/05/13 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android