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 相关文章推荐
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
浅谈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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
Java程序员常见面试题
2015/07/16 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
出国留学介绍信
2014/01/13 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
亮剑观后感
2015/06/05 职场文书