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 相关文章推荐
列表内容的选择
Jun 30 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
js实现自动播放匀速轮播图
Feb 06 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
django manage.py扩展自定义命令方法
2018/05/27 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python实现在线翻译功能
2020/03/03 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
环境建设实施方案
2014/03/14 职场文书
驳回起诉裁定书
2015/05/19 职场文书
小学运动会入场口号
2015/12/24 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
python实现简单聊天功能
2021/07/07 Python