vue-quill-editor插入图片路径太长问题解决方法


Posted in Vue.js onJanuary 08, 2021

最近做项目的时候有一个发布新闻的需求,新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。
由于项目是用 Vue 开发的,所以找编辑器的时候选了 vue-quill-editor 。编辑器长如下的样子:

vue-quill-editor插入图片路径太长问题解决方法

现在的问题

但是这个编辑器会把插入的图片会转成 base64 位的编码,使得编辑器内容保存进数据库的时候会超出限制长度,从而报错。

vue-quill-editor插入图片路径太长问题解决方法

从问题来源着手

首先要明白导致这个问题的原因是 vue-quill-editor 编辑器默认把上传的图片给转成 base64 编码,那是不是有这么一个配置参数可以设置上传后图片的格式呢?经过一番文档的查找,貌似是没有。但是提供了一个 handlers 可以自定义图片上传的方式,那就从这里下文章。大概意思是点击这个图片按钮的时候,会出发一个回调,可以在回调里触发自己的文件上传开关。这里我用的文件上传是 element-ui 的 el-upload。

安装vue-quill-editor

npm install vue-quill-editor --save

配置vue-quill-editor

配置 html

<quill-editor
  v-model="ruleForm.content"
  ref="myQuillEditor"
  :options="editorOption"
  class="ql-editor"
  :class="operationType.includes('check') ? 'disabled' : ''"
  :disabled="operationType.includes('check')"
  >
</quill-editor>

导入vue-quill-editor 且设置components:

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  }
}

设置options:

editorOption:{
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] }],
        ['clean'],
        ['link', 'image']
      ],
      handlers: {
        image: function(value) {
          if (value) {
            // 触发element-ui的文件上传
            document.querySelector(".avatar-uploader input").click();
          } else {
            this.quill.format("image", false);
          }
        },
      }
    }
  },
  placeholder: '请输入',
},

引入相关style:

<style lang="scss">
 @import '~quill/dist/quill.core.css';
 @import '~quill/dist/quill.snow.css';
 @import '~quill/dist/quill.bubble.css';
</style>

配置el-upload

template:

<el-upload
  ref="quillUploader"
  class="avatar-uploader"
  :action="serverUrl"
  :show-file-list="false"
  :auto-upload="false"
  :on-change="onChangeQuill"
  :before-upload="beforeUpload"
  :limit="20"
  :multiple="true"
  :accept="acceptFile">
</el-upload>

onChange的时候执行文件上传,这里的文件上传用的是腾讯的对象存储服务,cosUtils封装了一些对象存储的一些工具方法,你们可以自行替换成自己后端的上传接口。下面这段代码的大概意思是文件上传到对象存储服务器成功之后,拿到具体的图片地址,插入到编辑器光标所在的位置,这个时候图片就显示出来了。

onChangeQuill(file, fileList) { 
  let fileName = file.uid + file.name
  cosUtils.putObject(fileName, file.raw, 'operate/', (err, data) => { // 新闻图片存到operate/目录下
    console.log(err || data)
    if (!err) { 
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 图片上传到对象存储后的具体地址
      let imgSrc = `https://xxxxxxx.cos.ap-shanghai.myqcloud.com/operate/${fileName}`
      quill.insertEmbed(length, "image", imgSrc)
      // 调整光标到最后
      quill.setSelection(length + 1)
    }
  })
}

到此这篇关于vue-quill-editor插入图片路径太长问题解决方法的文章就介绍到这了,更多相关vue-quill-editor 图片路径 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php学习之 数组声明
2011/06/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php生成HTML文件的类方法
2019/10/11 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python多任务及返回值的处理方法
2019/01/22 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
英国电子专家:maplin
2019/09/04 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
酒店中秋节促销方案
2014/01/30 职场文书
教堂婚礼主持词
2014/03/14 职场文书
优秀学生评语大全
2014/04/25 职场文书
环境整治工作方案
2014/05/18 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
2014年工人工作总结
2014/11/25 职场文书
公司庆典欢迎词
2015/01/26 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
七年级作文之冬景
2019/11/07 职场文书
Mysql Show Profile
2021/04/05 MySQL
在redisCluster中模糊获取key方式
2021/07/09 Redis
分享几个简单MySQL优化小妙招
2022/03/31 MySQL