富文本编辑器,粘贴一张本地图片会直接以base64格式展示,导致提交后端时内容过长,如果图片多了,导致数据库不好存储,如果文章被删,那么图片也不好找回,为了解决这个问题我们在粘贴图片之后将图片上传到服务器,拿到线上地址进行回显友好解决此类问题。
话不多说上代码:
1、HTML
<div class="editor" ref="editor" :style="styles"></div>
2、main.js中挂在全局axios
import axios from 'axios'
Vue.prototype.$axios= axios
3、js
import Quill from "quill";
import quillEditor from 'vue-quill-editor';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
import Video from "../../quill/video.js";
import imageResize from 'quill-image-resize-module';
Quill.register(Video,true);
export default {
name: "Editor",
data() {
return {
uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken()
},
Quill: null,
currentValue: "",
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
// 工具栏配置
toolbar: {
container:[
["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"] // 链接、图片、视频
]
},
},
placeholder: "请输入内容",
readOnly: this.readOnly,
},
};
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
this.currentValue = val === null ? "" : val;
if (this.Quill) {
this.Quill.pasteHTML(this.currentValue);
}
}
},
immediate: true,
},
},
mounted() {
this.init();
},
beforeDestroy() {
this.Quill = null;
},
methods:{
init() {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
window.addEventListener(
"paste",
(evt) => {
if (
evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length
) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, (file) => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
const formData = new FormData();
formData.append("file", file);
this.$axios.post(`${process.env.VUE_APP_BASE_API}/file/upload`, formData).then(
res => {
console.log(res);
if (res.data.code == 200) {
console.log(res.data.data.src)
let length = this.Quill.getSelection().index; //光标位置
// 插入图片地址
this.Quill.insertEmbed(length, "image", res.data.data.url);
// 光标后移一位
this.Quill.setSelection(length + 1);
} else {
this.$message({
message: res.data.message,
type: 'warning'
});
}
})
});
}
},
false
);
},
}
}
欢迎各位大佬指正