From b7143b51f3a50b6fac9c139d291c1fad017daee6 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期五, 08 十二月 2023 15:50:50 +0800
Subject: [PATCH] 使用tinymce富文本
---
src/components/Editor/index.vue | 31 +++++++++++++++++++++++++++----
1 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 0a696f2..42806c6 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -33,8 +33,30 @@
const { proxy } = getCurrentInstance();
+import{ Quill } from 'vue-quill-editor';
+// 自定义插入a链接
+var Link = Quill.import('formats/link');
+class FileBlot extends Link { // 继承Link Blot
+ static create(value) {
+ let node = undefined
+ if (value&&!value.href){ // 适应原本的Link Blot
+ node = super.create(value);
+ }
+ else{ // 自定义Link Blot
+ node = super.create(value.href);
+ // node.setAttribute('download', value.innerText); // 左键点击即下载
+ node.innerText = value.innerText;
+ node.download = value.innerText;
+ }
+ return node;
+ }
+}
+FileBlot.blotName = 'link';
+FileBlot.tagName = 'A';
+Quill.register(FileBlot);
+
const quillEditorRef = ref();
-const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/system/common/uploadFile"); // 上传的图片服务器地址
const headers = ref({
Authorization: "Bearer " + getToken()
});
@@ -87,10 +109,10 @@
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
- ["link", "image", "video"] // 链接、图片、视频
+ ["link", "image", "upload"] // 链接、图片、视频
],
},
- placeholder: "请输入内容",
+ placeholder: props.readOnly ? "" : "请输入内容",
readOnly: props.readOnly
});
@@ -108,7 +130,7 @@
const content = ref("");
watch(() => props.modelValue, (v) => {
if (v !== content.value) {
- content.value = v === undefined ? "<p></p>" : v;
+ content.value = (v === undefined || v === "") ? "<p></p>" : v;
}
}, { immediate: true });
@@ -156,6 +178,7 @@
// 获取光标位置
let length = quill.selection.savedRange.index;
// 插入图片，res.url为服务器返回的图片链接地址
+
quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName);
// 调整光标到最后
quill.setSelection(length + 1);
--
Gitblit v1.9.2