时间:2021-05-26
背景:
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 = trueconst 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 = falseconst vm = thislet url = ''if (this.uploadType === 'image') { // 获得文件上传后的URL地址url = 访问路径 + e}if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中let value = urlvm.addRange = vm.$refs.myQuillEditor.quill.getSelection()value = value.indexOf('http') !== -1 ? value : 'http:' + valuevm.$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 自定义工具栏和自定义图片上传路径操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在Excel的日常使用中,我们有时会建立一个自定义工具栏,如何你想备份这个工具栏或者希望和其他人一起分享的话,具体该如何操作呢? 一、共享自定义工具栏
给大家分享的功能是layui自定义工具栏功能效果:开启数据表格头部工具栏区域关键参数:toolbar参数类型:String/DOM/Boolean参数说明:to
本文为大家分享了Vue+ElementUI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下1.安装npminstallv
matplotlib工具栏源码探析二(添加、删除内置工具项)探讨了工具栏内置工具项的管理,除了内置工具项,很多场景中需要自定义工具项,官方给出了案例https:
word开始菜单不显示的解决方法: 1、鼠标右键单击菜单栏或者工具栏任意处,在弹出的选项中,选择自定义。 2、在自定义界面,工具栏一项中勾选开始菜单即可。