diff --git a/dist.zip b/dist.zip index cd89f81..776eb9a 100644 Binary files a/dist.zip and b/dist.zip differ diff --git a/dist07-28.zip b/dist07-28.zip new file mode 100644 index 0000000..cd89f81 Binary files /dev/null and b/dist07-28.zip differ diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue index 4bf6a83..c82b498 100644 --- a/src/components/Editor/index.vue +++ b/src/components/Editor/index.vue @@ -29,8 +29,8 @@ @@ -53,7 +53,6 @@ editable @edit="handleTabsEdit" @tab-change="handleTabChange" - v-if="tabsData.length" > import { QuillEditor, Quill } from "@vueup/vue-quill"; import "@vueup/vue-quill/dist/vue-quill.snow.css"; -// /computed -import { getCurrentInstance, reactive, ref, toRaw, onMounted, nextTick } from "vue"; +import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue"; import { generateUUID } from "@/utils"; // import { h } from "@/utils/url"; import { routerObj } from "./utils.js"; @@ -128,7 +126,7 @@ let fontSizeStyle = Quill.import("attributors/style/size"); fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"]; Quill.register(fontSizeStyle, true); -// 自定义Blot; +// 自定义Blot import ImageBlot from "./quill-image"; import Video from "./quill-video"; import TabsBlot from "./quill-tabs"; @@ -153,7 +151,7 @@ const activeEditor = ref("main"); // 跟踪当前活跃编辑器:main/tab-索 // 标签页数据(新增key作为唯一标识,isEditing控制编辑状态) const tabsData = ref([]); // 标签页编辑器ref数组 -const tabEditors = reactive([]); +const tabEditors = ref([]); // 标题编辑输入框的ref const editInputRefs = ref([]); const currentEditingTabsRef = ref(null); @@ -166,9 +164,7 @@ const props = defineProps({ // 主编辑器内容双向绑定 const editorContent = computed({ - get: () => { - return props.content; - }, + get: () => props.content, set: val => { emit("update:content", val); } @@ -179,7 +175,6 @@ const myQuillEditor = ref(null); // 主编辑器ref const options = reactive({ theme: "snow", debug: "warn", - strict: false, modules: { toolbar: { container: [ @@ -306,7 +301,7 @@ const handleHttpUpload = async options => { quill = rawQuillEditor.getQuill(); } else { const tabIndex = parseInt(activeEditor.value.split("-")[1]); - rawQuillEditor = toRaw(tabEditors[tabIndex]); + rawQuillEditor = toRaw(tabEditors.value[tabIndex]); quill = rawQuillEditor.getQuill(); } @@ -442,7 +437,7 @@ const insertVideoToEditor = (videoUrl, coverUrl) => { quill = toRaw(myQuillEditor.value)?.getQuill(); } else { const tabIndex = parseInt(activeEditor.value.split("-")[1]); - quill = toRaw(tabEditors[tabIndex])?.getQuill(); + quill = toRaw(tabEditors.value[tabIndex])?.getQuill(); } if (quill) { @@ -489,7 +484,7 @@ const handleTabsEdit = (targetKey, action) => { // 删除标签页 const index = tabsData.value.findIndex(item => item.key === targetKey); tabsData.value.splice(index, 1); - tabEditors.splice(index, 1); + tabEditors.value.splice(index, 1); editInputRefs.value.splice(index, 1); // 调整活跃编辑器索引 @@ -537,7 +532,6 @@ const finishEditTitle = index => { // 其他方法(保持不变) const onContentChange = content => { - console.log(content, "=content="); emit("handleRichTextContentChange", content); emit("update:content", content); }; @@ -615,25 +609,26 @@ const loadTabsDataToEditor = tabs => { }; onMounted(() => { - nextTick(() => { - initTitle(); - // 监听编辑按钮点击事件 - const editorEl = document.querySelector(".ql-editor"); - if (editorEl) { - editorEl.addEventListener("edit-tabs", e => { - console.log(e.detail.blot, "=e.detail="); - const tabsData = TabsBlot.value(e.detail.blot.domNode); - if (tabsData.length > 0) { - // 保存当前编辑的标签页引用 - currentEditingTabsRef.value = e.detail.blot; - // 加载数据到弹窗 - loadTabsDataToEditor(tabsData); - // 显示弹窗 - outerVisible.value = true; - } - }); - } - }); + initTitle(); + // 监听编辑按钮点击事件 + const editorEl = document.querySelector(".ql-editor"); + if (editorEl) { + editorEl.addEventListener("edit-tabs", e => { + console.log(1232, "测试"); + console.log(e.detail.blot, "=e.detail="); + const tabsData = TabsBlot.value(e.detail.blot.domNode); + console.log(tabsData, "=tabsData="); + if (tabsData.length > 0) { + // 保存当前编辑的标签页引用 + currentEditingTabsRef.value = e.detail.blot; + console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value ="); + // 加载数据到弹窗 + loadTabsDataToEditor(tabsData); + // 显示弹窗 + outerVisible.value = true; + } + }); + } }); defineExpose({ @@ -674,4 +669,3 @@ defineExpose({ margin: -2px 0; /* 与标签对齐 */ } -./quill-image1111