富文本 附件上传
This commit is contained in:
parent
3f84a5b143
commit
d3766b6eca
@ -7,8 +7,8 @@
|
||||
:on-error="handleUploadError"
|
||||
name="file"
|
||||
:show-file-list="false"
|
||||
:on-preview="handlePreview"
|
||||
:headers="headers"
|
||||
style="display: none"
|
||||
ref="upload"
|
||||
v-if="this.type == 'url'"
|
||||
>
|
||||
@ -19,6 +19,8 @@
|
||||
|
||||
<script>
|
||||
import Quill from "quill";
|
||||
import Link from "./link";
|
||||
Quill.register(Link, true);
|
||||
import "quill/dist/quill.core.css";
|
||||
import "quill/dist/quill.snow.css";
|
||||
import "quill/dist/quill.bubble.css";
|
||||
@ -72,7 +74,8 @@ export default {
|
||||
debug: "warn",
|
||||
modules: {
|
||||
// 工具栏配置
|
||||
toolbar: [
|
||||
toolbar: {
|
||||
container:[
|
||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||
["blockquote", "code-block"], // 引用 代码块
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||
@ -82,9 +85,25 @@ export default {
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
["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: "请输入内容",
|
||||
readOnly: this.readOnly,
|
||||
},
|
||||
@ -122,9 +141,13 @@ export default {
|
||||
this.Quill = null;
|
||||
},
|
||||
methods: {
|
||||
|
||||
init() {
|
||||
const editor = this.$refs.editor;
|
||||
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') {
|
||||
let toolbar = this.Quill.getModule("toolbar");
|
||||
@ -138,6 +161,7 @@ export default {
|
||||
}
|
||||
this.Quill.pasteHTML(this.currentValue);
|
||||
this.Quill.on("text-change", (delta, oldDelta, source) => {
|
||||
|
||||
const html = this.$refs.editor.children[0].innerHTML;
|
||||
const text = this.Quill.getText();
|
||||
const quill = this.Quill;
|
||||
@ -157,11 +181,15 @@ export default {
|
||||
},
|
||||
// 上传前校检格式和大小
|
||||
handleBeforeUpload(file) {
|
||||
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
|
||||
const isJPG = type.includes(file.type);
|
||||
console.log(file)
|
||||
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) {
|
||||
this.$message.error(`图片格式错误!`);
|
||||
this.$message.error(`格式错误!`);
|
||||
return false;
|
||||
}
|
||||
// 校检文件大小
|
||||
@ -175,19 +203,53 @@ export default {
|
||||
return true;
|
||||
},
|
||||
handleUploadSuccess(res, file) {
|
||||
// 如果上传成功
|
||||
if (res.code == 200) {
|
||||
// 获取富文本组件实例
|
||||
let arr = file.name.split('.')
|
||||
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 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("图片插入失败");
|
||||
// 如果上传成功
|
||||
if (res.code === 200) {
|
||||
//光标后移长度，默认是1
|
||||
let shiftLength = 1;
|
||||
// 插入链接
|
||||
this.lastSelection = res.originalFilename.length;
|
||||
|
||||
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() {
|
||||
this.$message.error("图片插入失败");
|
||||
|
||||
58
ruoyi-ui/src/components/Editor/link.js
Normal file
58
ruoyi-ui/src/components/Editor/link.js
Normal file
@ -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…
x
Reference in New Issue
Block a user