vue-quill-editor+el-upload 在一个页面多次使用且支持批量上传的图片按顺序排列
程序员文章站
2022-03-13 08:31:16
vue-quill-editor封装的组件quillEditor.vue需要注意的点页面可以多次调用quillEditor.vue
vue-quill-editor封装的组件
quillEditor.vue
<template>
<div>
<quill-editor
:id="randomId(3)"
:ref="myEditor"
v-model="content"
:options="options"
@change="onChange($event)"
style="width: 100%; height: 100%"
/>
<el-upload
:key="randomId(3)"
class="upload-col"
:auto-upload="false"
:accept="accept"
action=""
multiple
:before-upload="beforeUpload"
:data="myHeaders"
:on-change="fileAdd"
ref="upload"
>
</el-upload>
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
quillEditor
} from 'vue-quill-editor'
/**
* 富文本
* content 内容
* options 参数配置
*
*/
// 工具栏配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
];
export default {
props: {
/* 编辑器的内容 */
value: {
type: String
},
/* 编辑器的索引 */
quillIndex: {
type: Number,
default: 0
},
/* 编辑器的唯一标识符 */
myEditor: {
type: String,
default: "quillEditor"
}
},
components: {
quillEditor
},
computed: {
editor () {
return this.$refs.myEditor.quillEditor;
},
},
data () {
return {
accept: 'image/*',
imageTypes: ['jpg', 'jpeg', 'png', 'gif'],
maxFileLen: 0,
content: this.value,
options: {
theme: "snow", // or 'bubble'
placeholder: "请输入内容",
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: (value) => {
if (value) {
document.querySelectorAll(".upload-col input")[this.quillIndex].click();
} else {
this.quill.format("image", false);
}
}
}
}
}
},
myHeaders: { token: localStorage.getItem('token') },
}
},
watch: {
value: function () {
this.content = this.value;
}
},
methods: {
randomId (len) {
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var tempLen = chars.length, tempStr = '';
for (var i = 0; i < len; ++i) {
tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
}
return tempStr;
},
// 图片单个或者批量按照顺序上传
fileAdd (fileobj, filelist) {
let currLength = filelist.length
this.maxFileLen = Math.max(currLength, this.maxFileLen)
setTimeout(() => {
if (currLength != this.maxFileLen) return
this.maxFileLen = 0
this.$refs.upload.clearFiles()
this.fileUpload(filelist)
})
},
fileUpload (files) {
var param = new FormData()
files.forEach(item => {
param.append('fileList', item.raw)
})
this.$http({
url: this.$http.adornUrl('XXXXXX'),
method: 'post',
data: param
}).then(res => {
if (res.data.code === 0) {
const quill = this.$refs["" + this.myEditor+ ""].quill
, length = quill.getSelection().index
var fileList = res.data.fileList.reverse()
fileList.forEach(item => {
quill.insertEmbed(length, 'image', item)
quill.setSelection(length + 1) //定位索引
})
}
}).catch(err => {
this.$message.error('上传图片失败！请重新上传')
})
},
beforeUpload (file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message({
message: '图片单张不得超过2M，请重新选择！',
type: 'error'
})
}
return isLt2M
},
onChange({ html }) {
this.$emit("input", this.content);
}
}
}
</script>
<style lang="scss" scoped>
.upload-col {
height: 0;
width: 0;
overflow: hidden;
}
</style>
需要注意的点
<el-upload> 和<quill-editor> 里面的id 和 key ，取随机数 randomId(3)
富文本组件里的ref属性 :ref="myEditor"
批量图片调用后需要清空 this.$refs.upload.clearFiles()，才能再一次使用
页面可以多次调用
<template>
<quill-editor v-model="content1" :quillIndex="0" myEditor="Editorc0"/>
<quill-editor v-model="content2" :quillIndex="1" myEditor="Editorc1"/>
.
.
.
</template>
<script>
import quillEditor from './quillEditor'
export default {
data () {
return{
content1:'',
content2:''
}
},
components: {
quillEditor
}
}
</script>
本文地址：https://blog.csdn.net/ajia0601/article/details/113980462
上一篇： 3--jsp中的page指令
下一篇： php中的try catch简单用法