vue-quill-editor 自定义工具栏和自定义图片上传路径操作


Posted in Javascript onAugust 03, 2020

背景:

1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现,需要删除部分功能。

2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区,这会导致content字符长度太长,不一定可以传到后台保存(其实即使可以保存也不推荐这种方案)。所以我们需要将方案修改为将图片上传到服务器,然后通过URL的 方式访问到图片回显及使用。

vue-quill-editor工具栏改造及自定义图片上传(这里使用的是element-ui的上传组件):

引入插件(vue引入vue-quill-editor自行问度娘)

vue html

<el-upload class="avatar-uploader quill-img" name="file" 
:action="uploadImgUrl" 
:show-file-list="false" 
:headers="uploadHeaders" 
:on-success="quillImgSuccess" 
:before-upload="quillImgBefore" 
accept='.jpg,.jpeg,.png,.gif'>
</el-upload>
 
<quill-editor ref="myTextEditor" 
v-model="yearReviewForm.workCompletion" 
:options="editorOption">
</quill-editor>
vue js 

editorOption: {
  placeholder: 'Please enter it here...',
  modules:{
    toolbar:{
   container: [
    ['bold', 'italic', 'underline', 'strike'],// 加粗,斜体,下划线,删除线
  ['blockquote'],// 引用
  [{ 'header': 1 }, { 'header': 2 }],// 标题,键值对的形式;1、2表示字体大小
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表
  [{ 'indent': '-1'}, { 'indent': '+1' }],// 缩进
  [{ 'direction': 'rtl' }],// 文本方向
  [{ 'size': ['small', false, 'large', 'huge'] }],// 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],//几级标题
  [{ 'color': [] }, { 'background': [] }],// 字体颜色,字体背景颜色
  [{ 'font': [] }],//字体
  [{ 'align': [] }],//对齐方式
  ['clean'],//清除字体样式
  ['image']//上传图片、上传视频
  ],
  handlers: {
  'image': function(val){
    if(val){
      document.querySelector('.quill-img input').click()
    }else{
     this.quill.format('image', false);
    }
    }
   }
   }
  }
}

自定义上传回显

// 富文本编辑框图片上传
 quillImgSuccess(res, file) {
  // 获取富文本组件实例
  let quill = this.$refs.myTextEditor.quill;
  // 如果上传成功
  if (res.code == '00001') {
  // 获取光标所在位置
  let length = quill.getSelection().index;
  // 插入图片 res.data为服务器返回的图片地址
  quill.insertEmbed(length, 'image', '/static-resource/' + res.body);// 这里的url是图片的访问路径不是真实物理路径
  // 调整光标到最后
  quill.setSelection(length + 1)
  } else {
  this.$message.error('图片插入失败')
  }
 }

校验图片格式

quillImgBefore(file){
  let fileType = file.type;
  if(fileType === 'image/jpeg' || fileType === 'image/png'){
  return true;
  }else {
  this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
  return false;
  }
 },

至此大功告成。这里面只记录了关键步骤,不清楚的地方评论吧

!!!!注意:

在自定义上传图片的改造过程中如果存在多个富文本框同时存在一个页面时需要保证每个富文本及对应的upload的ref不一样

补充知识:在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频) 运用vue-quilt-editor编写富文本编辑器 自定义图片路径 获取后台返回路径

一、首先在main.js 引入 vue-quilt-editor

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

引入vue-quilt-editor样式 否则样式会乱码

二、导入依赖

npm install vue-quilt-editor save

三、使用组件

1.code

<el-col :span="24" class="warp-main" >
<el-form-item >
<div class="edit_container">
<quill-editor v-model="mate.mateFormerHeader.values[object['description'].name]"
ref="myQuillEditor"
class="editer"
:headers="headers"
:options="editorOption" @ready="onEditorReady($event)">
</quill-editor>
<el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUploadDetial' :data="uploadData" :on-success='upScuccess'
:headers="headers" ref="upload" >
<el-button size="small" type="primary" id="imgInput" style="display:none">点击上传</el-button>
</el-upload>
</div>
</el-form-item>
 </el-col>

绑定v-model 添加方法 这里使用隐形的上传按钮 来自定义自己的路径 headers 绑定图片上传的token 否则会报401

headers: {
'Authorization': 'Bearer ' + JSON.parse(window.sessionStorage.getItem('token')),
'Accept': 'application/json',
'X-TenantId': JSON.parse(window.sessionStorage.getItem('user')).tenantId
},

2.js

import { quillEditor } from 'vue-quill-editor' // 调用编辑器

在挂载时为图片上传按钮绑定事件

mounted () {
// 为图片ICON绑定事件 getModule 为编辑器的内部属性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
},

onEditorReady () {
},
// 点击图片按钮会立即调用隐形按钮的上传

imgHandler (state) {

this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
const fileInput = document.getElementById('imgInput')
fileInput.click() // 加一个触发事件
}
this.uploadType = 'image'
},
beforeUploadDetial (file) {
// 图片上传之前调取的函数
console.log(file)
return this.qnUpload(file)
},
qnUpload (file) {
this.fullscreenLoading = true
const suffix = file.name.split('.')
const ext = suffix.splice(suffix.length - 1, 1)[0]
console.log(this.uploadType)
if (this.uploadType === 'image') { // 如果是点击插入图片
this.uploadData = {
key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`
}
}
},
upScuccess (e, file, fileList) {
console.log(e)
this.fullscreenLoading = false
const vm = this
let url = ''
if (this.uploadType === 'image') { // 获得文件上传后的URL地址
url = 访问路径 + e
}
if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
let value = url
vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
value = value.indexOf('http') !== -1 ? value : 'http:' + value
vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, 'image') // 调用编辑器的 insertEmbed 方法,插入URL
}
this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
},

以上这篇vue-quill-editor 自定义工具栏和自定义图片上传路径操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jquery中post方法用法实例
Oct 21 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 #Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 #Javascript
简单了解three.js 着色器材质
Aug 03 #Javascript
Element InputNumber 计数器的实现示例
Aug 03 #Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 #Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 #Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue实现搜索功能
2019/05/28 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python学习教程之常用的内置函数大全
2017/07/14 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python常用断言函数实例汇总
2020/11/30 Python
Python操作Excel的学习笔记
2021/02/18 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
求职信需要的五点内容
2014/02/01 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Python爬取某拍短视频
2021/06/11 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
JS class语法糖的深入剖析
2022/07/07 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang