mounted() {
var vm =this
var imgHandler = async function(state) {
if (state) {
//button is clicked
}
}
vm.$refs.newEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
}
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)
}
<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>
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
},
import Quill from 'quill'
import { ImageResize } from '../modules/ImageResize.js'
Quill.register('modules/imageResize', ImageResize)
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有