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 相关文章推荐
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
微信小程序删除处理详解
Aug 16 Javascript
详解jenkins自动化部署vue
May 14 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
php简单提示框alert封装函数
2010/08/08 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python实现简单多线程任务队列
2016/02/27 Python
代码详解django中数据库设置
2019/01/28 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python数据库小程序源代码
2019/09/15 Python
python对XML文件的操作实现代码
2020/03/27 Python
python如何查看网页代码
2020/06/07 Python
Python中常用的os操作汇总
2020/11/05 Python
Linux操作面试题
2015/02/11 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
工作说明书范文
2014/05/07 职场文书
企业宣传策划方案
2014/05/29 职场文书
公司演讲稿开场白
2014/08/25 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
党员检讨书范文
2014/12/27 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书