feat: 🚀 tabs功能基本完成

src/components/Editor/index2.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- 原有模板代码不变 -->
+    <!-- 图片上传组件 -->
     <el-upload
         :id="uuid"
         action="#"
@@ -13,6 +13,7 @@
         <i ref="uploadRef" class="Plus editor-img-uploader"></i>
     </el-upload>
 
+    <!-- 视频上传组件 -->
     <input
         type="file"
         accept="video/*"
@@ -22,9 +23,11 @@
         @change="handleVideoUpload"
         style="width: 0; height: 0; cursor: pointer; opacity: 0"
     />
+
+    <!-- 主富文本编辑器 -->
     <div class="editor">
         <QuillEditor
-            id="editorId"
+            id="mainEditor"
             ref="myQuillEditor"
             v-model:content="editorContent"
             contentType="html"
@@ -32,58 +35,145 @@
             :options="options"
         />
     </div>
+
+    <!-- 标签页配置弹窗 -->
+    <div>
+        <el-dialog v-model="outerVisible" title="标签页配置" style="width: 900px; height: 900px">
+            <el-tabs
+                v-model="activeName"
+                type="card"
+                class="demo-tabs"
+                editable
+                @edit="handleTabsEdit"
+                @tab-change="handleTabChange"
+            >
+                <el-tab-pane :label="item.title" :name="item.title" v-for="(item, index) in tabsData" :key="index">
+                    <!-- 标签页编辑器：使用动态ref + 唯一ID -->
+                    <QuillEditor
+                        :id="`tabEditor_${index}`"
+                        :ref="
+                            el => {
+                                if (el) tabEditors[index] = el;
+                            }
+                        "
+                        v-model:content="item.content"
+                        contentType="html"
+                        :options="options1"
+                    />
+                </el-tab-pane>
+            </el-tabs>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="outerVisible = false">取消</el-button>
+                    <el-button type="primary" @click="handleQR"> 确认 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 
 <script setup name="Editor">
-// 原有导入语句不变
 import { QuillEditor, Quill } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } 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";
 import { titleConfig } from "./titleConfig.js";
 import { uploadVideo, uploadImg } from "@/api/modules/upload";
 import { ElNotification } from "element-plus";
+import { useRouter } from "vue-router";
 
-// 字体配置保留
+// 字体配置
 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";
+Quill.register(Video);
+Quill.register(ImageBlot);
+Quill.register(TabsBlot);
+
+// 基础变量
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
 const uuid = ref("id-" + generateUUID());
 const $router = useRouter();
 const routerValueName = $router.currentRoute.value.name;
 const routerName = ref(routerObj[routerValueName]);
-Quill.register(Video);
-Quill.register(ImageBlot);
-
-// 原有响应式变量和props保留
-const { proxy } = getCurrentInstance();
-const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
 const uploadFileVideo = ref(null);
+const outerVisible = ref(false);
 const imageList = ref([]);
 const imageListDb = ref([]);
+const tabsData = ref([]);
+const activeName = ref(null);
+const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引
+
+// 标签页编辑器ref数组
+const tabEditors = ref([]);
+
+// Props
 const props = defineProps({
     content: { type: String, default: "" },
     readOnly: { type: Boolean, default: false },
     fileSizeLimit: { type: Number, default: 10 }
 });
 
-// 计算属性保留
+// 主编辑器内容双向绑定
 const editorContent = computed({
     get: () => props.content,
     set: val => {
         emit("update:content", val);
     }
 });
-const myQuillEditor = ref(null);
+const myQuillEditor = ref(null); // 主编辑器ref
 
-// 工具栏配置保留
+// 主编辑器配置
 const options = reactive({
+    theme: "snow",
+    debug: "warn",
+    modules: {
+        toolbar: {
+            container: [
+                ["bold", "italic", "underline", "strike"],
+                ["blockquote", "code-block"],
+                [{ list: "ordered" }, { list: "bullet" }],
+                [{ indent: "-1" }, { indent: "+1" }],
+                [{ size: fontSizeStyle.whitelist }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }, { background: [] }],
+                [{ align: [] }],
+                ["clean"],
+                ["link", "image", "video", "tabs"]
+            ],
+            handlers: {
+                image: function (value) {
+                    if (value) {
+                        activeEditor.value = "main";
+                        proxy.$refs.uploadRef.click();
+                    } else Quill.format("customImage", true);
+                },
+                video: function (value) {
+                    if (value) {
+                        activeEditor.value = "main";
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else Quill.format("customVideo", true);
+                },
+                tabs: function (value) {
+                    outerVisible.value = value;
+                }
+            }
+        }
+    },
+    placeholder: "请输入内容...",
+    readOnly: props.readOnly
+});
+
+// 标签页编辑器配置
+const options1 = reactive({
     theme: "snow",
     debug: "warn",
     modules: {
@@ -102,88 +192,46 @@ const options = reactive({
             ],
             handlers: {
                 image: function (value) {
-                    if (value) proxy.$refs.uploadRef.click();
-                    else Quill.format("image", true);
+                    if (value) {
+                        const currentIndex = tabsData.value.findIndex(item => item.title === activeName.value);
+                        activeEditor.value = `tab-${currentIndex}`;
+                        proxy.$refs.uploadRef.click();
+                    } else Quill.format("customImage", true);
                 },
                 video: function (value) {
-                    if (value) document.querySelector("#uploadFileVideo")?.click();
-                    else Quill.format("video", true);
+                    if (value) {
+                        const currentIndex = tabsData.value.findIndex(item => item.title === activeName.value);
+                        activeEditor.value = `tab-${currentIndex}`;
+                        document.querySelector("#uploadFileVideo")?.click();
+                    } else Quill.format("customVideo", true);
                 }
             }
         }
     },
     placeholder: "请输入内容...",
-    readOnly: props.readOnly,
-    clipboard: {
-        matchers: [
-            [
-                "img",
-                (node, delta) => {
-                    const src = node.getAttribute("src");
-                    const id = node.getAttribute("id");
-                    delta.insert({ image: { src, id: id } });
-                }
-            ]
-        ]
-    }
+    readOnly: props.readOnly
 });
 
-// 恢复排序函数（原有代码保留）
-const sortImageListByNumber = () => {
-    imageListDb.value.sort((a, b) => {
-        const getNumber = fileName => {
-            const match = fileName.match(/-(\d+)$/);
-            return match ? parseInt(match[1], 10) : 0;
-        };
-        const numA = getNumber(a.name);
-        const numB = getNumber(b.name);
-        return numA - numB;
-    });
-};
-
-// 上传前钩子保留（仅修复错误处理）
+// 上传前校验
 const handleBeforeUpload = file => {
     const fileType = file.type;
     file.customUid = generateUUID();
     imageListDb.value.push(file);
-    sortImageListByNumber(); // 保留排序调用
 
-    const validTypes = [
-        "image/jpeg",
-        "image/png",
-        "image/gif",
-        "image/jpg",
-        "image/bmp",
-        "image/webp",
-        "video/mov",
-        "video/ts",
-        "video/mp4",
-        "video/avi"
-    ];
-
-    if (validTypes.includes(fileType)) {
-        const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
-        if (!isLt) {
-            ElNotification({
-                title: "温馨提示",
-                message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
-                type: "warning"
-            });
-            // 仅移除当前无效文件（原有逻辑修复）
-            imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
-            return false;
-        }
-        return true;
-    } else {
-        ElNotification({
-            title: "温馨提示",
-            message: `文件格式不正确！`,
-            type: "warning"
-        });
-        // 仅移除当前无效文件（原有逻辑修复）
+    const validTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg", "image/bmp", "image/webp"];
+    if (!validTypes.includes(fileType)) {
+        ElNotification({ title: "格式错误", message: "仅支持图片格式", type: "warning" });
         imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
         return false;
     }
+
+    const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
+    if (!isLt) {
+        ElNotification({ title: "大小超限", message: `不能超过 ${props.fileSizeLimit} MB`, type: "warning" });
+        imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
+        return false;
+    }
+    return true;
 };
 
 // 图片上传（仅修复最后一张删除问题）
@@ -208,13 +256,21 @@ const handleHttpUpload = async options => {
             // 检查所有文件上传完成
             const allFilesUploaded = imageListDb.value.every(item => item.path);
             if (allFilesUploaded) {
-                const rawMyQuillEditor = toRaw(myQuillEditor.value);
-                const quill = rawMyQuillEditor.getQuill();
+                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, "image", {
+                    quill.insertEmbed(length, "customImage", {
                         url: h + item.path,
                         id: item.serverImgId || generateUUID()
                     });
@@ -236,17 +292,24 @@ const handleHttpUpload = async options => {
         imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
     }
 };
-
-// 视频上传保留
 const handleVideoUpload = async evt => {
     if (evt.target.files.length === 0) return;
     const formData = new FormData();
     formData.append("video", evt.target.files[0]);
     try {
-        let quill = toRaw(myQuillEditor.value).getQuill();
+        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, "video", {
+        quill.insertEmbed(length, "customVideo", {
             url: h + data.path,
             id: generateUUID()
         });
@@ -255,55 +318,155 @@ const handleVideoUpload = async evt => {
         console.log(error);
     }
 };
+// // 视频上传（区分tab和主富文本）
+// const handleVideoUpload = async evt => {
+//     if (evt.target.files.length === 0) return;
+//     const formData = new FormData();
+//     formData.append("video", evt.target.files[0]);
 
-// 内容变化监听（增加选区修复）
-const onContentChange = content => {
-    emit("handleRichTextContentChange", content);
-    emit("update:content", content);
-    console.log(content, "================content=================");
-    //  修复：当内容为空时确保编辑器可编辑
-    const rawMyQuillEditor = toRaw(myQuillEditor.value);
-    if (rawMyQuillEditor) {
-        const quill = rawMyQuillEditor.getQuill();
-        if (content === "") {
-            quill.enable(true);
-            quill.setSelection(0); // 强制设置光标位置
+//     try {
+//         const quill = await getCurrentQuillInstance();
+//         if (!quill) return;
+
+//         // 记录当前活跃编辑器类型，用于日志
+//         const editorType = activeEditor.value === "main" ? "主编辑器" : `标签页${activeEditor.value.split("-")[1]}`;
+//         console.log(`视频将插入到: ${editorType}`);
+
+//         const { data } = await uploadVideo(formData);
+//         const length = quill.selection.savedRange?.index || quill.getLength();
+//         quill.insertEmbed(length, "customVideo", {
+//             url: h + data.path,
+//             id: generateUUID()
+//         });
+//         evt.target.value = "";
+//     } catch (error) {
+//         console.error("视频上传失败:", error);
+//         ElNotification({ title: "上传失败", message: "视频上传出错", type: "error" });
+//     }
+// };
+
+// 标签页切换事件
+const handleTabChange = tabTitle => {
+    const tabIndex = tabsData.value.findIndex(item => item.title === tabTitle);
+    activeEditor.value = `tab-${tabIndex}`;
+    console.log(`切换到标签页: ${tabTitle} (索引: ${tabIndex})`);
+};
+
+// 标签页编辑事件
+const handleTabsEdit = (targetName, action) => {
+    if (action === "add") {
+        const newIndex = tabsData.value.length;
+        tabsData.value.push({ title: `标签${newIndex + 1}`, content: "" });
+        nextTick(() => {
+            activeName.value = `标签${newIndex + 1}`;
+            activeEditor.value = `tab-${newIndex}`;
+        });
+    } else if (action === "remove") {
+        const index = tabsData.value.findIndex(item => item.title === targetName);
+        tabsData.value.splice(index, 1);
+        tabEditors.value.splice(index, 1);
+
+        // 修正 activeEditor 索引
+        if (activeEditor.value.startsWith("tab-")) {
+            const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
+            if (currentTabIndex > index) {
+                // 若当前活跃标签页在删除项之后，索引减1
+                activeEditor.value = `tab-${currentTabIndex - 1}`;
+            } else if (currentTabIndex === index) {
+                // 若删除的是当前活跃标签页，切换到第一个标签页
+                activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
+            }
         }
     }
 };
 
-// 原有初始化和清空方法保留
-const initTitle = () => {
-    document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
-    for (let item of titleConfig.value) {
-        let tip = document.querySelector(".ql-toolbar " + item.Choice);
-        if (tip) tip.setAttribute("title", item.title);
+// 其他方法
+const onContentChange = content => {
+    emit("handleRichTextContentChange", content);
+    emit("update:content", content);
+};
+
+const handleQR = () => {
+    const quill = toRaw(myQuillEditor.value)?.getQuill();
+    if (quill) {
+        const range = quill.getSelection(true);
+        quill.insertEmbed(range.index, "tabs", tabsData.value);
+        quill.setSelection(range.index + 1);
+        outerVisible.value = false;
     }
 };
 
-const clearEditor = () => {
-    const rawMyQuillEditor = toRaw(myQuillEditor.value);
-    if (rawMyQuillEditor) {
-        const quill = rawMyQuillEditor.getQuill();
-        quill.setText("");
-        editorContent.value = "";
-    }
+const initTitle = () => {
+    const editor = document.querySelector(".ql-editor");
+    if (editor) editor.dataset.placeholder = "";
+    titleConfig.value.forEach(item => {
+        const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
+        if (tip) tip.setAttribute("title", item.title);
+    });
 };
 
 onMounted(() => {
     initTitle();
 });
 
-defineExpose({ clearEditor });
+defineExpose({
+    clearEditor: () => {
+        const quill = toRaw(myQuillEditor.value)?.getQuill();
+        if (quill) {
+            quill.setText("");
+            editorContent.value = "";
+        }
+    }
+});
 </script>
-
 <style lang="scss">
 @import "./index.scss";
 
 // 增加编辑器内容区交互性确保删除可用
 .ql-editor {
-    min-height: 100px; // 确保空编辑器也有点击区域
+    min-height: 600px; // 确保空编辑器也有点击区域
     cursor: text !important;
     user-select: text !important;
 }
+
+/* 标签页样式 */
+.quill-tabs {
+    margin: 15px 0;
+    overflow: hidden;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+}
+
+/* 用伪元素添加图标（可替换为自己的图标） */
+.ql-tabs::before {
+    font-size: 16px;
+    content: "T"; /* 用 emoji 或字体图标 */
+}
+.quill-tab-list {
+    display: flex;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #dddddd;
+}
+.quill-tab-button {
+    padding: 10px 15px;
+    font-weight: 500;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    transition: background-color 0.2s;
+}
+.quill-tab-button.active {
+    color: #007bff;
+    background-color: white;
+    border-bottom: 2px solid #007bff;
+}
+.quill-tab-content-list {
+    padding: 15px;
+}
+.quill-tab-content {
+    display: none;
+}
+.quill-tab-content.active {
+    display: block;
+}
 </style>