vue-quill-editor实现图⽚上传功能
问题描述
项⽬使⽤的vue2.0开发，项⽬中需要⼀个富⽂本编辑器，楼主经过⼀番⼼理挣扎选择了。具体如何引⽤作者在项⽬中已经写得很明⽩了，我在这⾥就不再赘述。 vue-quill-editor插⼊图⽚的⽅式是将图⽚转为base64再放⼊内容中，这样就会产⽣⼀个问题，如果图⽚⽐较⼤的话，富⽂本的内容就会很⼤，楼主是将内容存在
数据库中的，这样⼀来，⼀⽅⾯会占⽤⼤量的数据库存储空间，另⼀⽅⾯当图⽚太⼤的时候富⽂本的内容，会超过数据库的存储上限，从⽽会产⽣内容被截断从⽽显
什么是富文本编辑器⽰不全的问题（即使是text类型，也有存储上限65535）。
那么问题来了，如何将图⽚上传到⾃⼰的服务器或第三⽅服务，然后将获得的图⽚url插⼊到⽂本中呢？我认为⼤致有两个⽅法，其⼀是将任务交给服务端，服务端截取base64图⽚并转化为⽂件，将其路径或者url替换原来的图⽚数据；其⼆是对控件本⾝下⼿，⾸先将图⽚上传，然后插⼊到富⽂本中。接下来楼主就开始了⾃⼰的踩坑之路。
解决⽅案
基础简介
1.vue-quill-editor是基于适⽤于Vue2的富⽂本编辑器，所以对于quill的原⽣属性扩展也是⽀持的。
2.quill 中有许多扩展和⾃定义⽅法功能。⽐如图⽚的重定义⼤⼩、图⽚上传的点击处理等。
图⽚上传
通过查看quill项⽬issue。发现其中是有对图⽚上传这⽅⾯问题进⾏考虑和修改的。所以图⽚上传这个⽅案是可⾏的。接下来就是如何实现。
3.⾸先我们需要在项⽬中拿到quill的实例。这个在vue-quill-editor项⽬中有介绍如何获取。基本⽅法就是通过ref获取你的vue-quill-editor实例，再获取quill实例，代码
如下。其中newEditor就是我的vue-quill-editor
this.$wEditor.quill
4.在拿到实例后我们需要考虑如何图⽚上传并将url插⼊⽂本中。通过查发现可以注册⼀个⾃定义的图⽚处理函数，当顶部的⼯具栏中的图⽚按钮被点击的时候，就
会触发这个函数。然⽽在实际使⽤中你会发现这个函数并不像⽂档中所说的接收（image, callback）两个参数，image是你的图⽚，你只需要在callback中将传⼊处理后的url就可以。⽽是接收⼀个参数state，当被点击时就会触发这个函数，并传⼊state值----true。这⾥⾸先介绍⼀下，如何注册这个处理函数-imgHandler。这⾥要注意，注册函数要写在mounted⽣命周期钩⼦⾥。
mounted() {
var vm =this
var imgHandler = async function(state) {
if (state) {
//button is clicked
}
}
vm.$Module("toolbar").addHandler("image", imgHandler)
}
5.通过在stackflow查阅，发现就只能在imgHandler中⾃⼰实现点击上传和插⼊的功能。这样就在editor下⾯写⼀个不显⽰的input，并监听变化上传图⽚，获取其实
例，当imgHandler被点击时，模拟input按钮被点击。代码变成如下⽰例。
mounted() {
var vm =this
var imgHandler = async function(image) {
vm.addImgRange = vm.$Selection()
if (image) {
var fileInput = ElementById(vm.uniqueId) //隐藏的file⽂本ID
fileInput.click() //加⼀个触发事件
}
}
vm.$Module("toolbar").addHandler("image", imgHandler)
}
6.最后是input的点击上传和图⽚url的插⼊。
HTML代码
<div
v-loading="imageLoading"
element-loading-text="请稍等，图⽚上传中">
<quill-editor
ref="newEditor"
:options="newOption"
v-model="editorContent"
@change="editorChange">
</quill-editor>
<form action="" method="post" enctype="multipart/form-data" id="uploadFormMulti">
<input :id="uniqueId" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadImg('uploadFormMulti')"><!----> </form>
</div>
vue代码
uploadImg: async function(id) {
var vm = this
vm.imageLoading = true
var formData = new FormData($('#' + id)[0])
try {
const url = await vm.uploadImgReq(formData)// ⾃定义的图⽚上传函数
if (url != null && url.length > 0) {
var value = url
vm.addImgRange = vm.$Selection()
value = value.indexOf('http') != -1 ? value : 'http:' + value
vm.$wEditor.quill.insertEmbed(vm.addImgRange != null?vm.addImgRange.index:0, 'image', value, Quill.sources.USER)
} else {
vm.$message.warning("图⽚增加失败")
}
} catch ({message: msg}) {
vm.$message.warning(msg)
}
vm.imageLoading = false
},
到这⾥就⼤功告成啦。如果有什么错误、问题或者更好的解决⽅案欢迎指正讨论~
最后，在解决这个问题的时候，顺便把ImageResize集成到了控件中。具体实现⽐较简单可以参考vue-quill-editor中的demo⽰例 import Quill from 'quill'
import { ImageResize } from '../modules/ImageResize.js'
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发表评论