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.$refs.neweditor.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.$refs.neweditor.quill.getmodule("toolbar").addhandler("image", imghandler)
}
5.通过在stackflow查阅，发现就只能在imghandler中自己实现点击上传和插入的功能。这样就在editor下面写一个不显示的input，并监听变化上传图片，获取其实例，当imghandler被点击时，模拟input按钮被点击。代码变成如下示例。
mounted() {
var vm =this
var imghandler = async function(image) {
vm.addimgrange = vm.$refs.neweditor.quill.getselection()
if (image) {
var fileinput = document.getelementbyid(vm.uniqueid) //隐藏的file文本id
fileinput.click() //加一个触发事件
}
}
vm.$refs.neweditor.quill.getmodule("toolbar").addhandler("image", imghandler)
}
6.最后是input的点击上传和图片url的插入。
html代码
<div
v-loading="imageloading"
element-loading-text="请稍等，图片上传中">
<quill-editor
ref="neweditor"
:options="newoption"
style="height: 200px; margin-bottom: 54px"
v-model="editorcontent"
@change="editorchange">
</quill-editor>
<form action="" method="post" enctype="multipart/form-data" id="uploadformmulti">
<input style="display: none" :id="uniqueid" type="file" name="avator" multiple accept="image/jpg,image/jpeg,image/png,image/gif" @change="uploadimg('uploadformmulti')"><!--style="display: none"-->
</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.$refs.neweditor.quill.getselection()
value = value.indexof('http') != -1 ? value : 'http:' + value
vm.$refs.neweditor.quill.insertembed(vm.addimgrange != null?vm.addimgrange.index:0, 'image', value, quill.sources.user)
} else {
vm.$message.warning("图片增加失败")
}
document.getelementbyid(vm.uniqueid).value=''
} catch ({message: msg}) {
document.getelementbyid(vm.uniqueid).value=''
vm.$message.warning(msg)
}
vm.imageloading = false
},
到这里就大功告成啦。如果有什么错误、问题或者更好的解决方案欢迎指正讨论~
最后，在解决这个问题的时候，顺便把imageresize集成到了控件中。具体实现比较简单可以参考vue-quill-editor中的demo示例
import quill from 'quill'
import { imageresize } from '../modules/imageresize.js'
quill.register('modules/imageresize', imageresize)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。