解决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 word表格动态添加代码
Jun 07 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
Bootstrap插件全集
Jul 18 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 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的控制语句
2006/10/09 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
js取得url地址参数实例
2013/02/22 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
个性与发展自我评价
2014/02/11 职场文书
共青团员自我评价范文
2014/09/14 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
检讨书之工作不认真
2019/08/14 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Linux中各个目录的作用与内容
2022/06/28 Servers