富文本编辑器quill-editor自定义图片上传

目录

1、页面引入

2、自定义imge处理的图片上传组件

3、图片上传成功后回显嵌入

4、最终呈现效果

5、源码

之前我整理过一篇文章，Quill编辑器实现图片上传功能（戳链接可查看）

但是想来那个是相当于自定义的更加简洁实用的工具栏toolbar，不过需要自定义的代码有些繁琐。

再遇到类似功能时我就想着寻找一个更简单的办法，使toolbar用原生的，仅仅改变img的处理方式。

注：上次quill是局部引用，这次是全局引用，不再赘述。两种方法各有优劣，各位看官，酌情使用。

1、页面引入

<!-- 富文本编辑器 --><el-form-item label="图文详情" prop="graphicDetails"><quill-editor v-model="addForm.graphicDetails" ref="myQuillEditor"></quill-editor></el-form-item>

2、自定义imge处理的图片上传组件

思路：自定义的处理方法使之弹出自定义的图片上传组件即可，之后便是上传的那一套流程。

mounted() {this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)},

imgHandler(state) {this.addRange = this.$refs.myQuillEditor.quill.getSelection()if (state) {document.querySelector('.open-file').click()}},

<el-upload action="" :show-file-list="false" :before-upload="quillUpload"><el-button v-show="false" ref="myButton" class="open-file" size="small" type="primary">点击上传</el-button></el-upload>

3、图片上传成功后回显嵌入

async quillUpload(file) {const isJPG = file.type === 'image/jpeg'const isLt2M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')return}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!')return}var formData = new FormData()formData.append('file', file)const { data: res } = await this.$http.post('/upload', formData)if (!res.success) {//this.$message.error('图片上传失败！')return this.$message.error(res.msg)}var url = res.data.urlvar that = thissetTimeout(function () {// 获取富文本组件实例let quill = that.$refs.myQuillEditor.quill// 获取光标所在位置let length = quill.getSelection().indexquill.insertEmbed(length, 'image', url) // 调整光标到最后quill.setSelection(length + 1)}, 500)},

4、最终呈现效果

5、源码

之后再附上全部vue源码，方便各位参考。

<template><!-- 卡片视图 --><el-card><!-- 提示 --><el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert><!-- Tab栏 --><el-form :model="addForm" size="small" :rules="addFormRules" ref="addFormRef" label-width="100px"><el-form-item label="所属店铺" prop="shopId"><el-select v-model="addForm.shopId" placeholder="请选择" style="width:100%;"><el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId"></el-option></el-select></el-form-item><el-form-item label="商品标题" prop="title"><el-input v-model="addForm.title"></el-input></el-form-item><el-form-item label="商品名称" prop="goodsName"><el-input v-model="addForm.goodsName"></el-input></el-form-item><el-form-item label="商品编号" prop="goodsNum"><el-input v-model="addForm.goodsNum"></el-input></el-form-item><el-form-item label="市场价格" prop="marketPrice"><el-input v-model="addForm.marketPrice" type="number"></el-input></el-form-item><el-form-item label="实际定价" prop="truePrice"><el-input v-model="addForm.truePrice" type="number"></el-input></el-form-item><el-form-item label="商品分类" prop="goodsType"><el-cascader v-model="addForm.goodsType" :show-all-levels="false" :options="treeList" :props="cascaderProps" @change="onCascadeChange" style="width:100%;"></el-cascader></el-form-item><el-form-item label="产地" prop="productionPlace"><el-input v-model="addForm.productionPlace"></el-input></el-form-item><el-form-item label="规格/重量" prop="spec"><el-input v-model="addForm.spec"></el-input></el-form-item><el-form-item label="数量" prop="stockNum"><el-input v-model="addForm.stockNum" type="number"></el-input></el-form-item><el-form-item label="保质期" prop="shelfLife"><el-input v-model="addForm.shelfLife"></el-input></el-form-item><!-- <el-form-item label="轮播图片" prop=""><el-upload action="" list-type="picture-card" :on-remove="handleRemove" :http-request="UploadImage" :file-list="imgList"><i class="el-icon-plus"></i></el-upload></el-form-item> --><el-form-item label="轮播图片" prop=""><el-image :src="item.url" style="width:178px;height:178px;" :key="index" v-for="(item,index) in imgList" :preview-src-list="[item.url]"></el-image><el-upload v-if="imgList.length<5" accept="image/png, image/jpeg" class="avatar-uploader" action="" :show-file-list="false" :before-upload="beforeAvatarUpload"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item><el-form-item label="商品主图" prop="mainImg"><el-radio-group v-model="addForm.mainImg"><el-radio :label="item.url" :key="index" v-for="(item,index) in imgList" style="width: 178px;display:inline-block;text-align:center;margin-right:10px;">选择</el-radio></el-radio-group></el-form-item><!-- 富文本编辑器 --><el-form-item label="图文详情" prop="graphicDetails"><quill-editor v-model="addForm.graphicDetails" ref="myQuillEditor"></quill-editor></el-form-item><!-- 添加商品 --><el-form-item><el-button type="primary" @click="addGoods">添加</el-button><el-button @click="cancelBtn">取消</el-button></el-form-item></el-form><el-upload action="" :show-file-list="false" :before-upload="quillUpload"><el-button v-show="false" ref="myButton" class="open-file" size="small" type="primary">点击上传</el-button></el-upload></el-card></template><script>import 'quill/dist/quill.snow.css'export default {components: {},data() {return {shopList: [],imgList: [],addForm: {shopId: '',title: '',goodsName: '',goodsNum: '',productionPlace: '',shelfLife: '',truePrice: undefined,marketPrice: undefined,spec: '',stockNum: undefined,//轮播图carouselImg: '',//商品主图mainImg: '',goodsType: '',// 商品详情描述graphicDetails: '',},addFormRules: {title: [{required: true,message: '请输入商品标题',trigger: 'blur',},],goodsName: [{required: true,message: '请输入商品名称',trigger: 'blur',},],truePrice: [{required: true,message: '请输入实际定价',trigger: 'blur',},],marketPrice: [{required: true,message: '请输入市场价格',trigger: 'blur',},],promotionPrice: [{required: true,message: '请输入促销价格',trigger: 'blur',},],spec: [{required: true,message: '请输入商品重量',trigger: 'blur',},],stockNum: [{required: true,message: '请输入商品数量',trigger: 'blur',},],goodsType: [{required: true,message: '请选择商品分类',trigger: 'blur',},],mainImg: [{required: true,message: '请选择商品主图',trigger: 'change',},],},treeList: [],// 级联选择器配置cascaderProps: {// 配置触发选项 hover/clickexpandTrigger: 'hover',value: 'name',label: 'name',children: 'children',checkStrictly: true,},editorOption: {modules: {toolbar: {container: '#toolbar',handlers: {image: function (value) {let that = thisif (value) {that.container.querySelector('.open-file').click()} else {this.quill.format('image', false)}},},},},},}},mounted() {this.getCascadeList()this.getShopList()},mounted() {this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)},computed: {},methods: {// 点击图片ICON触发事件imgHandler(state) {this.addRange = this.$refs.myQuillEditor.quill.getSelection()if (state) {document.querySelector('.open-file').click()}},async quillUpload(file) {const isJPG = file.type === 'image/jpeg'const isLt2M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')return}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!')return}var formData = new FormData()formData.append('file', file)const { data: res } = await this.$http.post('/upload', formData)if (!res.success) {//this.$message.error('图片上传失败！')return this.$message.error(res.msg)}var url = res.data.urlvar that = thissetTimeout(function () {// 获取富文本组件实例let quill = that.$refs.myQuillEditor.quill// 获取光标所在位置let length = quill.getSelection().indexquill.insertEmbed(length, 'image', url) // 调整光标到最后quill.setSelection(length + 1)}, 500)},async getShopList() {const { data: res } = await this.$http.get('/shop/singleList')if (!res.success) {//return this.$message.error('获取商品分类列表失败！')return this.$message.error(res.msg)}this.shopList = res.data},async beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg'const isLt2M = file.size / 1024 / 1024 < 5if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!')return false}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 5MB!')return false}var formData = new FormData()formData.append('file', file)const { data: res } = await this.$http.post('/uploadShrink',formData)console.info(res)if (!res.success) {//return this.$message.error('图片上传失败！')return this.$message.error(res.msg)}this.imgList.push({ url: res.data.url })console.info(this.imgList)return this.$message.success('图片上传成功！')},async getCascadeList() {const { data: res } = await this.$http.get('/category/treeList')if (!res.success) {//return this.$message.error('获取商品分类列表失败！')return this.$message.error(res.msg)}this.treeList = res.data},// 级联选择器选中项变化时出发// 把level id 加一并回传onCascadeChange(val) {this.addForm.goodsType = val[val.length - 1]},// 添加商品表单验证addGoods() {this.addForm.carouselImg = '' //初始化if (this.imgList.length == 0) {this.$message.error('请至少设置一张轮播图')return false} else {this.imgList.map((item) => {this.addForm.carouselImg += item.url + ','})this.addForm.carouselImg = this.addForm.carouselImg.substring(0,this.addForm.carouselImg.length - 1)}this.$refs.addFormRef.validate(async (valid) => {if (!valid) return this.$message.error('表单验证不通过！')const { data: res } = await this.$http.post('/goods/add',this.addForm)if (!res.success) return this.$message.error(res.msg)this.$message.success('添加商品成功!')this.$router.push('/goodsList')})},cancelBtn() {this.$router.push('/goodsList')},},}</script><style lang='less' scoped>.el-checkbox {margin: 0 8px 0 0 !important;}.el-steps {margin-top: 15px;margin-bottom: 15px;}.el-tabs {margin-top: 15px;}// .avatar-uploader.el-image {border: 1px dashed #d9d9d9;border-radius: 6px;width: 178px;height: 178px;margin-right: 10px;}.avatar-uploader {border: 1px dashed #d9d9d9;border-radius: 6px;height: 178px;cursor: pointer;display: inline-block;width: 178px;vertical-align: top;}.avatar-uploader:hover {border-color: #409eff;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;//border: 1px solid red;//margin-top: 80px;line-height: 178px;text-align: center;}</style>

就是这样啦，如果你想让我知道你来过，欢迎关注、收藏和评论，本程序媛此刻心情好，过时不候^-^