From ee6f8c315926a871f11a96a69702efcef4d0b49f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 26 五月 2025 13:49:03 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
src/components/Editor/index.vue | 99 +++++++++++++++++++++++++++++++------------------
1 files changed, 62 insertions(+), 37 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 0a696f2..efd0edc 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -27,17 +27,18 @@
</template>
<script setup>
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { getToken } from "@/utils/auth";
+import axios from 'axios'
+import { QuillEditor } from "@vueup/vue-quill"
+import "@vueup/vue-quill/dist/vue-quill.snow.css"
+import { getToken } from "@/utils/auth"
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
-const quillEditorRef = ref();
-const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+const quillEditorRef = ref()
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload") // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
const headers = ref({
Authorization: "Bearer " + getToken()
-});
+})
const props = defineProps({
/* 缂栬緫鍣ㄧ殑鍐呭 */
@@ -69,7 +70,7 @@
type: String,
default: "url",
}
-});
+})
const options = ref({
theme: "snow",
@@ -92,59 +93,60 @@
},
placeholder: "璇疯緭鍏ュ唴瀹�",
readOnly: props.readOnly
-});
+})
const styles = computed(() => {
- let style = {};
+ let style = {}
if (props.minHeight) {
- style.minHeight = `${props.minHeight}px`;
+ style.minHeight = `${props.minHeight}px`
}
if (props.height) {
- style.height = `${props.height}px`;
+ style.height = `${props.height}px`
}
- return style;
-});
+ return style
+})
-const content = ref("");
+const content = ref("")
watch(() => props.modelValue, (v) => {
if (v !== content.value) {
- content.value = v === undefined ? "<p></p>" : v;
+ content.value = v == undefined ? "<p></p>" : v
}
-}, { immediate: true });
+}, { immediate: true })
// 濡傛灉璁剧疆浜嗕笂浼犲湴鍧�鍒欒嚜瀹氫箟鍥剧墖涓婁紶浜嬩欢
onMounted(() => {
if (props.type == 'url') {
- let quill = quillEditorRef.value.getQuill();
- let toolbar = quill.getModule("toolbar");
+ let quill = quillEditorRef.value.getQuill()
+ let toolbar = quill.getModule("toolbar")
toolbar.addHandler("image", (value) => {
if (value) {
- proxy.$refs.uploadRef.click();
+ proxy.$refs.uploadRef.click()
} else {
- quill.format("image", false);
+ quill.format("image", false)
}
- });
+ })
+ quill.root.addEventListener('paste', handlePasteCapture, true)
}
-});
+})
// 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
function handleBeforeUpload(file) {
- const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
- const isJPG = type.includes(file.type);
+ const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"]
+ const isJPG = type.includes(file.type)
//妫�楠屾枃浠舵牸寮�
if (!isJPG) {
- proxy.$modal.msgError(`鍥剧墖鏍煎紡閿欒!`);
- return false;
+ proxy.$modal.msgError(`鍥剧墖鏍煎紡閿欒!`)
+ return false
}
// 鏍℃鏂囦欢澶у皬
if (props.fileSize) {
- const isLt = file.size / 1024 / 1024 < props.fileSize;
+ const isLt = file.size / 1024 / 1024 < props.fileSize
if (!isLt) {
- proxy.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`);
- return false;
+ proxy.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`)
+ return false
}
}
- return true;
+ return true
}
// 涓婁紶鎴愬姛澶勭悊
@@ -152,21 +154,44 @@
// 濡傛灉涓婁紶鎴愬姛
if (res.code == 200) {
// 鑾峰彇瀵屾枃鏈疄渚�
- let quill = toRaw(quillEditorRef.value).getQuill();
+ let quill = toRaw(quillEditorRef.value).getQuill()
// 鑾峰彇鍏夋爣浣嶇疆
- let length = quill.selection.savedRange.index;
+ let length = quill.selection.savedRange.index
// 鎻掑叆鍥剧墖锛宺es.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囬摼鎺ュ湴鍧�
- quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName);
+ quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName)
// 璋冩暣鍏夋爣鍒版渶鍚�
- quill.setSelection(length + 1);
+ quill.setSelection(length + 1)
} else {
- proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触");
+ proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触")
}
}
// 涓婁紶澶辫触澶勭悊
function handleUploadError() {
- proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触");
+ proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触")
+}
+
+// 澶嶅埗绮樿创鍥剧墖澶勭悊
+function handlePasteCapture(e) {
+ const clipboard = e.clipboardData || window.clipboardData
+ if (clipboard && clipboard.items) {
+ for (let i = 0; i < clipboard.items.length; i++) {
+ const item = clipboard.items[i]
+ if (item.type.indexOf('image') !== -1) {
+ e.preventDefault()
+ const file = item.getAsFile()
+ insertImage(file)
+ }
+ }
+ }
+}
+
+function insertImage(file) {
+ const formData = new FormData()
+ formData.append("file", file)
+ axios.post(uploadUrl.value, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: headers.value.Authorization } }).then(res => {
+ handleUploadSuccess(res.data)
+ })
}
</script>
--
Gitblit v1.9.3