富文本 附件上传
This commit is contained in:
parent
3f84a5b143
commit
d3766b6eca
|
@ -7,8 +7,8 @@
|
||||||
:on-error="handleUploadError"
|
:on-error="handleUploadError"
|
||||||
name="file"
|
name="file"
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
|
:on-preview="handlePreview"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
style="display: none"
|
|
||||||
ref="upload"
|
ref="upload"
|
||||||
v-if="this.type == 'url'"
|
v-if="this.type == 'url'"
|
||||||
>
|
>
|
||||||
|
@ -19,6 +19,8 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Quill from "quill";
|
import Quill from "quill";
|
||||||
|
import Link from "./link";
|
||||||
|
Quill.register(Link, true);
|
||||||
import "quill/dist/quill.core.css";
|
import "quill/dist/quill.core.css";
|
||||||
import "quill/dist/quill.snow.css";
|
import "quill/dist/quill.snow.css";
|
||||||
import "quill/dist/quill.bubble.css";
|
import "quill/dist/quill.bubble.css";
|
||||||
|
@ -72,7 +74,8 @@ export default {
|
||||||
debug: "warn",
|
debug: "warn",
|
||||||
modules: {
|
modules: {
|
||||||
// 工具栏配置
|
// 工具栏配置
|
||||||
toolbar: [
|
toolbar: {
|
||||||
|
container:[
|
||||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||||
["blockquote", "code-block"], // 引用 代码块
|
["blockquote", "code-block"], // 引用 代码块
|
||||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||||
|
@ -82,9 +85,25 @@ export default {
|
||||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||||
[{ align: [] }], // 对齐方式
|
[{ align: [] }], // 对齐方式
|
||||||
["clean"], // 清除文本格式
|
["clean"], // 清除文本格式
|
||||||
["link", "image", "video"] // 链接、图片、视频
|
["link", "image", "video"], // 链接、图片、视频
|
||||||
],
|
["uploadfile"], //自定义附件按钮
|
||||||
},
|
],
|
||||||
|
handlers:{
|
||||||
|
uploadfile: function (value) {
|
||||||
|
//自定义上传附件功能
|
||||||
|
this.uploadType = "uploadfile";
|
||||||
|
this.accept = "application/*";
|
||||||
|
setTimeout(() => {
|
||||||
|
if (value) {
|
||||||
|
document.querySelector(".el-upload input").click();
|
||||||
|
} else {
|
||||||
|
this.quill.format("uploadfile", false);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
placeholder: "请输入内容",
|
placeholder: "请输入内容",
|
||||||
readOnly: this.readOnly,
|
readOnly: this.readOnly,
|
||||||
},
|
},
|
||||||
|
@ -122,9 +141,13 @@ export default {
|
||||||
this.Quill = null;
|
this.Quill = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
const editor = this.$refs.editor;
|
const editor = this.$refs.editor;
|
||||||
this.Quill = new Quill(editor, this.options);
|
this.Quill = new Quill(editor, this.options);
|
||||||
|
this.$el.querySelector(
|
||||||
|
".ql-uploadfile"
|
||||||
|
).innerHTML = `<i class="el-icon-upload" style="font-size: 18px"/>`;
|
||||||
// 如果设置了上传地址则自定义图片上传事件
|
// 如果设置了上传地址则自定义图片上传事件
|
||||||
if (this.type == 'url') {
|
if (this.type == 'url') {
|
||||||
let toolbar = this.Quill.getModule("toolbar");
|
let toolbar = this.Quill.getModule("toolbar");
|
||||||
|
@ -138,6 +161,7 @@ export default {
|
||||||
}
|
}
|
||||||
this.Quill.pasteHTML(this.currentValue);
|
this.Quill.pasteHTML(this.currentValue);
|
||||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||||
|
|
||||||
const html = this.$refs.editor.children[0].innerHTML;
|
const html = this.$refs.editor.children[0].innerHTML;
|
||||||
const text = this.Quill.getText();
|
const text = this.Quill.getText();
|
||||||
const quill = this.Quill;
|
const quill = this.Quill;
|
||||||
|
@ -157,11 +181,15 @@ export default {
|
||||||
},
|
},
|
||||||
// 上传前校检格式和大小
|
// 上传前校检格式和大小
|
||||||
handleBeforeUpload(file) {
|
handleBeforeUpload(file) {
|
||||||
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
|
console.log(file)
|
||||||
const isJPG = type.includes(file.type);
|
let arr = file.name.split('.')
|
||||||
|
let fileType = arr[arr.length-1]
|
||||||
|
const type = ['png','jpg','jpeg','svg','doc','docx','xls','xlsx'];
|
||||||
|
const isJPG = type.includes(fileType);
|
||||||
|
console.log(isJPG)
|
||||||
// 检验文件格式
|
// 检验文件格式
|
||||||
if (!isJPG) {
|
if (!isJPG) {
|
||||||
this.$message.error(`图片格式错误!`);
|
this.$message.error(`格式错误!`);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
// 校检文件大小
|
// 校检文件大小
|
||||||
|
@ -175,19 +203,53 @@ export default {
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
handleUploadSuccess(res, file) {
|
handleUploadSuccess(res, file) {
|
||||||
// 如果上传成功
|
let arr = file.name.split('.')
|
||||||
if (res.code == 200) {
|
let fileType = arr[arr.length-1]
|
||||||
// 获取富文本组件实例
|
if(['png','jpg','jpeg','svg'].includes(fileType)){
|
||||||
|
// 如果上传成功
|
||||||
|
if (res.code == 200) {
|
||||||
|
// 获取富文本组件实例
|
||||||
|
let quill = this.Quill;
|
||||||
|
// 获取光标所在位置
|
||||||
|
let length = quill.getSelection().index;
|
||||||
|
// 插入图片 res.url为服务器返回的图片地址
|
||||||
|
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
||||||
|
// 调整光标到最后
|
||||||
|
quill.setSelection(length + 1);
|
||||||
|
} else {
|
||||||
|
this.$message.error("图片插入失败");
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
// 获取富文本组件实例
|
||||||
let quill = this.Quill;
|
let quill = this.Quill;
|
||||||
// 获取光标所在位置
|
// 如果上传成功
|
||||||
let length = quill.getSelection().index;
|
if (res.code === 200) {
|
||||||
// 插入图片 res.url为服务器返回的图片地址
|
//光标后移长度,默认是1
|
||||||
quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
|
let shiftLength = 1;
|
||||||
// 调整光标到最后
|
// 插入链接
|
||||||
quill.setSelection(length + 1);
|
this.lastSelection = res.originalFilename.length;
|
||||||
} else {
|
|
||||||
this.$message.error("图片插入失败");
|
quill.insertEmbed(this.lastSelection, "link", {
|
||||||
|
href: res.url,
|
||||||
|
innerText: res.originalFilename,
|
||||||
|
});
|
||||||
|
// 调整光标到最后
|
||||||
|
quill.setSelection(this.lastSelection + shiftLength);
|
||||||
|
// this.$modal.closeLoading();
|
||||||
|
} else {
|
||||||
|
// this.$modal.closeLoading();
|
||||||
|
this.$modal.msgError("上传失败,请重试");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
handlePreview(file){
|
||||||
|
var link = document.createElement("a"); //定义一个a标签
|
||||||
|
link.download = file.name; //下载后的文件名称
|
||||||
|
link.href = file.url; //需要生成一个 URL 来实现下载
|
||||||
|
link.click(); //模拟在按钮上实现一次鼠标点击
|
||||||
|
window.URL.revokeObjectURL(link.href);
|
||||||
},
|
},
|
||||||
handleUploadError() {
|
handleUploadError() {
|
||||||
this.$message.error("图片插入失败");
|
this.$message.error("图片插入失败");
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
import Quill from "quill";
|
||||||
|
const InlineEmbed = Quill.import("blots/inline");
|
||||||
|
// import Inline from '../blots/inline';
|
||||||
|
|
||||||
|
// 自定义超链接
|
||||||
|
class Link extends InlineEmbed {
|
||||||
|
static blotName = "link";
|
||||||
|
static tagName = "A";
|
||||||
|
static SANITIZED_URL = "about:blank";
|
||||||
|
static PROTOCOL_WHITELIST = ["http", "https", "mailto", "tel", "sms"];
|
||||||
|
|
||||||
|
static create(value) {
|
||||||
|
let node = undefined;
|
||||||
|
if (value && !value.href) {
|
||||||
|
// 自身Link Blot
|
||||||
|
node = super.create(value);
|
||||||
|
node.setAttribute("href", this.sanitize(value));
|
||||||
|
node.setAttribute("rel", "noopener noreferrer");
|
||||||
|
node.setAttribute("target", "_blank");
|
||||||
|
} else {
|
||||||
|
// 自定义Link Blot
|
||||||
|
node = super.create(value.href);
|
||||||
|
node.setAttribute("href", value.href); // 左键点击即下载
|
||||||
|
node.setAttribute("download", value.innerText); // 左键点击即下载
|
||||||
|
node.innerText = value.innerText;
|
||||||
|
node.onclick = function(){
|
||||||
|
window.open(value.href)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
static formats(domNode) {
|
||||||
|
return domNode.getAttribute("href");
|
||||||
|
}
|
||||||
|
|
||||||
|
static sanitize(url) {
|
||||||
|
return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
|
||||||
|
}
|
||||||
|
|
||||||
|
format(name, value) {
|
||||||
|
if (name !== this.statics.blotName || !value) {
|
||||||
|
super.format(name, value);
|
||||||
|
} else {
|
||||||
|
// @ts-expect-error
|
||||||
|
this.domNode.setAttribute("href", this.constructor.sanitize(value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sanitize(url, protocols) {
|
||||||
|
const anchor = document.createElement("a");
|
||||||
|
anchor.href = url;
|
||||||
|
const protocol = anchor.href.slice(0, anchor.href.indexOf(":"));
|
||||||
|
return protocols.indexOf(protocol) > -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Link;
|
Loading…
Reference in New Issue