来源:
参考转载自:https://blog.csdn.net/wepe12/article/details/89447829
1、安装 quill-editor ,element ui
cnpm install vue-quill-editor --save
cnpm i element-ui -S
3、main.js引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Element from 'element-ui';
Vue.use(VueQuillEditor);
Vue.use(Element);
3、整合
<template>
<div>
<div>
<!-- 图片上传组件辅助 :auto-upload="false"-->
<el-upload
v-show="false"
class="upload-demo"
ref="upload"
:action="serverUrl"
:on-success="handleSuccess"
:show-file-list="false"
:before-upload="beforeUpload"
v-loading.fullscreen.lock="quillUpdateImg"
element-loading-text="拼命上传中..."
>
<el-button slot="trigger" size="small" type="primary" id="upload">选取文件</el-button>
</el-upload>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)"
></quill-editor>
</div>
</div>
</template>
<script>
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // toggled buttons
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ 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: [] }],
["link", "image"],
["clean"]
];
export default {
data() {
return {
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画,刚开始是false,不显示
content: null,
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: function(value) {
if (value) {
// 触发el-upload框选择图片文件自动上传到服务器
document.querySelector("#upload").click();
} else {
this.quill.format("image", false);
}
}
}
}
}
},
serverUrl:
"http://xxx/Upload/upload_file", // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
} // 有的图片服务器要求请求头需要有token
};
},
methods: {
onEditorChange({ editor, html, text }) {
this.content = html;
console.log("图片将使用服务器地址的方式保存在富文本");
console.log(html);
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true;
setTimeout(() => {}, 6000);
},
handleSuccess(res, file) {
console.log("图片上传到服务器的返回值");
console.log(res);
var url = "http://xxx/uploads/"; //图片位置
// res为图片服务器返回的数据
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.success) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.file_name为服务器返回的图片名称数组
quill.insertEmbed(length, "image", url + res.file_name[0]);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error("图片插入失败");
},
contentToFrom() {
this.$emit("func", this.content);
}
}
};
</script>
3、效果