diff --git a/dist.zip b/dist.zip index be77a00..8fd3999 100644 Binary files a/dist.zip and b/dist.zip differ diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue index a84dc78..94ef1fe 100644 --- a/src/components/Editor/index.vue +++ b/src/components/Editor/index.vue @@ -239,6 +239,7 @@ const options = reactive({ const options1 = reactive({ theme: "snow", debug: "warn", + strict: false, modules: { toolbar: { container: [ @@ -377,6 +378,7 @@ const handleHttpUpload = async options => { fileItem.path = data.path; } const allFilesUploaded = imageListDb.value.every(item => item.path); + console.log(allFilesUploaded, "=allFilesUploaded="); if (allFilesUploaded) { let rawQuillEditor = ""; let quill = ""; @@ -395,10 +397,13 @@ const handleHttpUpload = async options => { const insertPosition = selection ? selection.index : quill.getLength(); imageListDb?.value?.forEach(item => { // 使用光标位置插入图片 - quill.insertEmbed(insertPosition, "customImage", { - url: item.path, - id: item.serverImgId || generateUUID() - }); + setTimeout(() => { + quill.insertEmbed(insertPosition, "customImage", { + url: item.path, + id: item.serverImgId || generateUUID() + }); + }, 100); + // 插入后光标后移一位(避免多张图片重叠插入) quill.setSelection(insertPosition + 1); }); diff --git a/src/components/Editor/index2.vue b/src/components/Editor/index2.vue index 8b75f8b..a84dc78 100644 --- a/src/components/Editor/index2.vue +++ b/src/components/Editor/index2.vue @@ -123,17 +123,35 @@ import { useRouter } from "vue-router"; import { useMsg } from "@/hooks/useMsg"; // 字体配置 let fontSizeStyle = Quill.import("attributors/style/size"); -fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"]; +fontSizeStyle.whitelist = [ + "12px", + "14px", + "16px", + "18px", + "20px", + "22px", + "24px", + "26px", + "28px", + "30px", + "32px", + "34px", + "36px", + "38px", + "40px", + "42px" +]; Quill.register(fontSizeStyle, true); // 自定义Blot import ImageBlot from "./quill-image"; import Video from "./quill-video"; import TabsBlot from "./quill-tabs"; +import DynamicDivBlot from "./quill-detail-div"; Quill.register(Video); Quill.register(ImageBlot); Quill.register(TabsBlot); - +Quill.register(DynamicDivBlot); // 基础变量 const { proxy } = getCurrentInstance(); const emit = defineEmits(["update:content", "handleRichTextContentChange"]); @@ -164,7 +182,10 @@ const props = defineProps({ // 主编辑器内容双向绑定 const editorContent = computed({ - get: () => props.content, + get: () => { + if (!props.content) return ""; + return props.content; + }, set: val => { emit("update:content", val); } @@ -175,6 +196,7 @@ const myQuillEditor = ref(null); // 主编辑器ref const options = reactive({ theme: "snow", debug: "warn", + strict: false, modules: { toolbar: { container: [ @@ -208,6 +230,7 @@ const options = reactive({ } } }, + placeholder: "请输入内容...", readOnly: props.readOnly }); @@ -271,27 +294,88 @@ const handleBeforeUpload = file => { imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid); return false; } + console.log(imageListDb.value, "=================value=================="); return true; }; -// 图片上传(保持不变) +// // 图片上传(保持不变) +// const handleHttpUpload = async options => { +// let formData = new FormData(); +// formData.append("image", options.file); +// imageList.value.push(options.file); + +// try { +// const result = await uploadImg(formData, routerName.value, options.file.customUid); +// if (result?.data?.code === 0) { +// const { data } = result.data; +// const { imgId } = result; + +// const fileItem = imageListDb.value.find(item => item.customUid === imgId); +// if (fileItem) { +// fileItem.serverImgId = imgId; +// fileItem.path = data.path; +// } + +// const allFilesUploaded = imageListDb.value.every(item => item.path); +// if (allFilesUploaded) { +// let rawQuillEditor = ""; +// let quill = ""; +// if (activeEditor.value === "main") { +// rawQuillEditor = toRaw(myQuillEditor.value); +// quill = rawQuillEditor.getQuill(); +// } else { +// const tabIndex = parseInt(activeEditor.value.split("-")[1]); +// rawQuillEditor = toRaw(tabEditors.value[tabIndex]); +// quill = rawQuillEditor.getQuill(); +// } + +// imageListDb.value.forEach(item => { +// const length = quill.getLength() - 1; +// quill.insertEmbed(length, "customImage", { +// url: item.path, +// id: item.serverImgId || generateUUID() +// }); +// quill.setSelection(length + 1); +// }); + +// const finalLength = quill.getLength(); +// quill.setSelection(finalLength); + +// imageList.value = []; +// imageListDb.value = []; +// } +// } +// } catch (error) { +// console.error("图片上传失败:", error); +// imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid); +// imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid); +// } +// }; + +// // 图片上传(修改插入位置逻辑) const handleHttpUpload = async options => { let formData = new FormData(); formData.append("image", options.file); - imageList.value.push(options.file); + // imageList.value.push(options.file); try { const result = await uploadImg(formData, routerName.value, options.file.customUid); if (result?.data?.code === 0) { const { data } = result.data; const { imgId } = result; - + // imageListDb.value.forEach(item => { + // if (item.customUid === imgId) { + // item.serverImgId = imgId; + // item.path = data.path; + // console.log(item.path, "================>"); + // } + // }); const fileItem = imageListDb.value.find(item => item.customUid === imgId); + console.log(fileItem, "=fileItem="); if (fileItem) { fileItem.serverImgId = imgId; fileItem.path = data.path; } - const allFilesUploaded = imageListDb.value.every(item => item.path); if (allFilesUploaded) { let rawQuillEditor = ""; @@ -305,17 +389,23 @@ const handleHttpUpload = async options => { quill = rawQuillEditor.getQuill(); } - imageListDb.value.forEach(item => { - const length = quill.getLength() - 1; - quill.insertEmbed(length, "customImage", { + // 关键修改:获取当前光标位置(选区起始索引) + const selection = quill.getSelection(); + // 如果没有选区(光标未激活),默认插入到末尾 + const insertPosition = selection ? selection.index : quill.getLength(); + imageListDb?.value?.forEach(item => { + // 使用光标位置插入图片 + quill.insertEmbed(insertPosition, "customImage", { url: item.path, id: item.serverImgId || generateUUID() }); - quill.setSelection(length + 1); + // 插入后光标后移一位(避免多张图片重叠插入) + quill.setSelection(insertPosition + 1); }); - const finalLength = quill.getLength(); - quill.setSelection(finalLength); + // 最终光标定位到最后一张图片后面 + const finalPosition = insertPosition + imageListDb.value.length; + quill.setSelection(finalPosition); imageList.value = []; imageListDb.value = []; @@ -329,33 +419,127 @@ const handleHttpUpload = async options => { }; // 视频上传(保持不变) +// const handleVideoUpload = async evt => { +// if (evt.target.files.length === 0) return; +// const formData = new FormData(); +// formData.append("video", evt.target.files[0]); +// try { +// let rawQuillEditor = ""; +// let quill = ""; +// if (activeEditor.value === "main") { +// rawQuillEditor = toRaw(myQuillEditor.value); +// quill = rawQuillEditor.getQuill(); +// } else { +// const tabIndex = parseInt(activeEditor.value.split("-")[1]); +// rawQuillEditor = toRaw(tabEditors.value[tabIndex]); +// quill = rawQuillEditor.getQuill(); +// } +// let length = quill.selection.savedRange.index; +// const { data } = await uploadVideo(formData); +// quill.insertEmbed(length, "customVideo", { +// url: data.path, +// id: generateUUID() +// }); +// uploadFileVideo.value.value = ""; +// } catch (error) { +// console.log(error); +// } +// }; +// 在