antd + vue2 + vue-quill-editor实现富文本+粘贴图片+图片大小设置
antd+vue+vue-quill-editor做富文本,图片粘贴改变大小
项目记录,思路其实就是监听粘贴事件,监听到用户粘贴调用上传图片接口,之后获取鼠标位置,将图片插入到指定位置就行
使用需要看下代码标蓝的地方,按需替换
安装
npm install vue-quill-editor --save
cnpm i quill-image-resize-module --save
控制图片大小的
引入后的报错问题
处理:
在build文件夹下的webpack.base.conf.js新增如下代码
module.exports = {
plugins: [
new webpack.ProvidePlugin({
// 在这儿添加下面两行
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
})
]
}
富文本组件
<template>
<!--富文本编辑器-->
<div class="app-container">
<div class="avatar">
<!-- 图片上传组件辅助-->
<a-upload
class="quill-upload"
:action="url"
name="file"
:beforeUpload="beforeUpload"
@change="uploadAttachment"
>
<a-button id="upBtn"> <a-icon type="upload" /> Upload </a-button>
</a-upload>
</div>
<a-row>
<div class="edit_container">
<quill-editor
class="editor"
v-model="newContent"
ref="myQuillEditor"
:options="editorOption"
@ready="onEditorReady($event)"
>
</quill-editor>
</div>
</a-row>
</div>
</template>
<script>
// 这里是自定义的上传服务器地址,换成自己的
import { imgUrl } from "@/main";
let token = sessionStorage.getItem("token");
let base = imgUrl; // 域名
let url = base + "/file/upload?token=" + token; // 上传图片接口,
// toolbar工具栏的工具选项(默认展示全部)
const toolOptions = [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }],
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ direction: "rtl" }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
["clean"],
["link", "image"]
];
import Quill from "quill";
import { useUpImg } from "@/pages/api/personalCenter/index"; // 上传图片接口,用于复制图片用的,替换成自己上传图片的接口
import { quillEditor } from "vue-quill-editor";
import ImageResize from "quill-image-resize-module";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
Quill.register("modules/imageResize", ImageResize);
export default {
name: "QuillEditorForm",
components: {
quillEditor
},
props: ["content"],
data() {
let that = this;
return {
uploadList: [],
url,
newContent: this.content, // 富文本内容
// 富文本编辑器配置
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
modules: {
clipboard: {
// 粘贴版,处理粘贴时候的自带样式
matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]]
},
toolbar: {
container: toolOptions, // 工具栏
handlers: {
image: function(value) {
if (value) {
// 绑定上传图片按钮
console.log(document.querySelector("#upBtn"));
document.querySelector("#upBtn").click();
} else {
this.quill.format("image", false);
}
}
}
},
imageResize: {
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]
}
}
}
};
},
mounted() {
// 自定义粘贴图片功能
let quill = this.$refs.myQuillEditor.quill;
quill.root.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;
}
this.uploadToServer(file, res => {
// 获取光标内容
var range = quill.getSelection();
if (range) {
this.zhanImg(res);
// 将光标移动到图片后面
this.$refs.myQuillEditor.quill.setSelection(range.index + 1);
}
});
});
}
},
false
);
},
methods: {
uploadToServer(file, callback) {
var formData = new FormData();
后端要的,file图片数据必须传
formData.append("file", file);
formData.append("name", "file");
//调上传接口 换成自己的 不过返回的数据要传入到callback中
useUpImg(this.url, formData).then(({ data: res }) => {
callback(res);
});
},
async beforeUpload(file) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/img" ||
file.type === "image/jpg";
if (!isJpgOrPng) {
this.$message.error("You can only upload JPG file!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("Image must smaller than 2MB!");
}
// await this.isSize(file, 345, 150);
return isJpgOrPng && isLt2M;
},
HandleCustomMatcher(node, Delta) {
// 文字、图片等,从别处复制而来,清除自带样式,转为纯文本
let ops = [];
Delta.ops.forEach(op => {
if (op.insert && typeof op.insert === "string") {
ops.push({
insert: op.insert
});
}
});
Delta.ops = ops;
return Delta;
},
// 粘贴图片回显
zhanImg(response) {
if (response.success) {
let quill = this.$refs.myQuillEditor.quill;
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 需要替换为自己服务器返回的图片地址
let imgPath = base + "/images/" + response.data + "?token=" + token;
quill.insertEmbed(length, "image", imgPath);
quill.setSelection(length + 1);
}
},
uploadAttachment(response, file, fileList) {
// 保存文件信息
// 获取富文本组件实例
if (response.file.status === "done") {
console.log(response);
let quill = this.$refs.myQuillEditor.quill;
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 需要替换为自己服务器返回的图片地址
let imgPath =
base + "/images/" + response.file.response.data + "?token=" + token;
quill.insertEmbed(length, "image", imgPath);
quill.setSelection(length + 1);
// 清空文件列表
}
},
onEditorReady(editor) {
// console.log(this.content);
document.querySelector("div.ql-editor").innerHTML = this.newContent;
}, // 准备编辑器
sendMsg(newval) {
this.$emit("msgEvent", this.newContent);
}
},
watch: {
newContent(val, newval) {
this.sendMsg(newval);
}
}
};
</script>
<style lang="less" scoped>
.quill-editor {
line-height: normal !important;
height: 500px !important;
}
.avatar {
display: none;
}
/deep/ .ql-disabled {
background-color: #f5f7fa;
border-color: #e4e7ed;
color: #c0c4cc;
cursor: not-allowed;
}
/*.edit_container {*/
/* position: relative;*/
/*}*/
</style>
父组件使用
引入
import myDomEditor from "./myDomEditor.vue"; // 富文本组件
注册
components: { myDomEditor },
使用
<myDomEditor :content="content" // v-mode绑定值 @msgEvent="msgEvent($event)" ></myDomEditor>
data :
data() { content:'' }
methods:
methods: { msgEvent(e) { // console.log(e); this.content = e; }, }
如果需要回显赋值就直接
this.content = res.data.content // 类似 ,直接就传到子组件中了
前台页面渲染
<div class="ql-editor" v-html="XXXX"></div>
效果
更多推荐
所有评论(0)