vue-quill-editor + el-upload
安装 vue-quill-editor
npm install vue-quill-editor -s
.挂载到项目,我这里使用的是全局挂载,挂载到main.js中加入如下代码
import VueQuillEditoe from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditoe)
页面使用
- html部分
<quill-editor
class="edioorBox"
v-model="dataValue.showContent"
ref="myQuillEditor"
:options="editorOption"
></quill-editor>
- js部分 editorOption 配置在data中
editorOption: {
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["image"], //去除video即可
],
handlers: {
image: function (value) {
if(value){
document.querySelector(".avatar-uploader input").click();
}else{
this.quill.format("image", false);
}
},
},
},
},
placeholder: "编辑内容...",
},
- 上传插入图片事件 methdos中
// 上传图片
UploadImg(file) {
let formData = new FormData();
formData.append("file", file.file);
axios
.post(`/dev-api/tradeapi/qycg/fileInfo/upload`, formData, {
type: "upload",
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
if(res.data.code==200){
this.editorSelection(res.data.data)
}else{
this.$message.error(res.data.message)
}
})
.catch(err=>{
this.$message.error('图片上传失败!!!')
})
},
// 图片上传前
beforePicUpload() {},
// 富文本中插入图片
editorSelection(imageUrl) {
let quill = this.$refs.myQuillEditor.quill;
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,imageUrl为服务器返回的图片链接地址
quill.insertEmbed(length, "image", imageUrl);
// 调整光标到最后
quill.setSelection(length + 1);
},
},
全部代码
<template>
<el-card v-loading="loading">
<el-form :model="dataValue" ref="Form" label-width="auto">
<el-form-item label="内容" prop="showContent" :span="24">
<quill-editor
class="edioorBox"
v-model="dataValue.showContent"
ref="myQuillEditor"
:options="editorOption"
></quill-editor>
</el-form-item>
</el-form>
<el-upload
class="avatar-uploader"
style="display: noen"
action="#"
limit="1"
:http-request="UploadImg"
:before-upload="beforePicUpload"
>
<el-button type="primary" plain>上传</el-button>
</el-upload>
</el-card>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
editorOption: {
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["image"], //去除video即可
],
handlers: {
image: function (value) {
if (value) {
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
},
},
},
placeholder: "编辑内容...",
},
};
},
methods: {
// 上传图片
UploadImg(file) {
let formData = new FormData();
formData.append("file", file.file);
axios
.post(`/dev-api/tradeapi/qycg/fileInfo/upload`, formData, {
type: "upload",
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
if(res.data.code==200){
this.editorSelection(res.data.data)
}else{
this.$message.error(res.data.message)
}
})
.catch(err=>{
this.$message.error('图片上传失败!!!')
})
},
// 图片上传前
beforePicUpload() {},
// 富文本中插入图片
editorSelection(imageUrl) {
let quill = this.$refs.myQuillEditor.quill;
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,imageUrl为服务器返回的图片链接地址
quill.insertEmbed(length, "image", imageUrl);
// 调整光标到最后
quill.setSelection(length + 1);
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .ql-editor {
min-height: 300px;
}
.fileBox {
.title {
font-weight: 600;
margin-bottom: 8px;
}
}
.bottomBox {
display: flex;
margin-top: 16px;
justify-content: flex-end;
}
</style>
功能概述
该功能使用自定义上传事件 通过handlers自定义富文本按钮事件来触发upload的 如下
handlers: {
image: function (value) {
if (value) {
// 该位置触发 uopload
document.querySelector(".avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
},
之后根据光标所在位置插入图片 如下函数将图片插入到富文本框中
editorSelection(imageUrl) {
let quill = this.$refs.myQuillEditor.quill;
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,imageUrl为服务器返回的图片链接地址
quill.insertEmbed(length, "image", imageUrl);
// 调整光标到最后
quill.setSelection(length + 1);
},