libao
/
lygjng-admin-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

富文本 附件上传

This commit is contained in:
wangting 2024-05-10 18:07:53 +08:00
parent 3f84a5b143
commit d3766b6eca
2 changed files with 139 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ruoyi-ui/src/components/Editor/index.vue
View File

@ -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
View 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;