feat: 🚀 tabs增加滚动条

src/components/Editor/index.vue

@@ -76,6 +76,7 @@
                                 @keydown.backspace.stop
                                 v-else
                                 v-model="item.title"
+                                max-length=""
                                 :ref="el => (editInputRefs[index] = el)"
                                 size="small"
                                 class="title-input"
@@ -113,7 +114,7 @@ import { QuillEditor, Quill } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
 import { generateUUID } from "@/utils";
-import { h } from "@/utils/url";
+// import { h } from "@/utils/url";
 import { routerObj } from "./utils.js";
 import { titleConfig } from "./titleConfig.js";
 import { uploadVideo, uploadImg } from "@/api/modules/upload";
@@ -307,7 +308,7 @@ const handleHttpUpload = async options => {
                 imageListDb.value.forEach(item => {
                     const length = quill.getLength() - 1;
                     quill.insertEmbed(length, "customImage", {
-                        url: h + item.path,
+                        url: item.path,
                         id: item.serverImgId || generateUUID()
                     });
                     quill.setSelection(length + 1);
@@ -346,7 +347,7 @@ const handleVideoUpload = async evt => {
         let length = quill.selection.savedRange.index;
         const { data } = await uploadVideo(formData);
         quill.insertEmbed(length, "customVideo", {
-            url: h + data.path,
+            url: data.path,
             id: generateUUID()
         });
         uploadFileVideo.value.value = "";
@@ -459,6 +460,7 @@ const handleQR = () => {
         return useMsg("error", "标签页内容为空 !");
     }
     const range = quill.getSelection(true);
+
     // 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
     if (currentEditingTabsRef.value) {
         // 1. 编辑模式：更新原有标签页组件
@@ -470,7 +472,10 @@ const handleQR = () => {
     } else {
         // 2. 新增模式：插入新的标签页组件
         quill.insertEmbed(range.index, "tabs", tabsData.value);
+        // 关键：在标签页前方插入一个空段落（确保顶部有空间）
+        // quill.insertText(range.index, "\n"); // 插入换行
         quill.setSelection(range.index + 1);
+        quill.insertText(range.index, "\n"); // 插入换行
     }
     // 关闭弹窗并清空临时数据
     setTabsInfo();

src/components/Editor/quill-tabs.js

@@ -28,7 +28,38 @@ class TabsBlot extends BlockEmbed {
         `
         );
 
-        // 标签栏
+        // 标签栏滚动容器 - 优化高度计算
+        const tabScrollContainer = document.createElement("div");
+        tabScrollContainer.className = "m-quill-tab-scroll-container";
+        tabScrollContainer.setAttribute(
+            "style",
+            `
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: none;
+            -ms-overflow-style: none; 
+            overflow-y: hidden;
+            height: auto;
+        `
+        );
+
+        // height: auto; /* 自动高度 */
+
+        // Chrome, Safari 隐藏滚动条
+        tabScrollContainer.style.overflow = "auto";
+        tabScrollContainer.style.webkitOverflowScrolling = "touch";
+        tabScrollContainer.style.scrollbarWidth = "none";
+        tabScrollContainer.style.msOverflowStyle = "none";
+
+        // // 关键：隐藏滚动条但保留功能
+        // tabScrollContainer.innerHTML = `
+        //     <style>
+        //         .m-quill-tab-scroll-container::-webkit-scrollbar {
+        //             display: none; /* Chrome, Safari 隐藏滚动条 */
+        //         }
+        //     </style>
+        // `;
+
+        // 标签栏 - 保持原有样式不变
         const tabList = document.createElement("div");
         tabList.className = "m-quill-tab-list";
         tabList.setAttribute(
@@ -36,10 +67,54 @@ class TabsBlot extends BlockEmbed {
             `
             display: flex;
             border-bottom: 1px solid #dddddd;
+            min-width: max-content; /* 确保内容撑开容器 */
         `
         );
 
-        // 内容区
+        // 生成标签按钮 - 优化内边距计算
+        tabs.forEach((tab, index) => {
+            const btn = document.createElement("button");
+            btn.className = `m-quill-tab-button`;
+            btn.setAttribute("data-index", index);
+            btn.textContent = tab.title;
+            btn.setAttribute(
+                "style",
+                `
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                margin-right: 5px; /* 增大间距 */
+                cursor: pointer;
+                font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+            tabList.appendChild(btn);
+        });
+
+        // 编辑按钮 - 保持原有样式不变
+        const editBtn = document.createElement("button");
+        editBtn.className = "m-quill-tab-edit-btn";
+        editBtn.innerHTML = "编辑";
+        editBtn.setAttribute("data-action", "edit");
+        editBtn.setAttribute(
+            "style",
+            `
+            padding: 10px;
+            margin-left: auto;
+            color: #606266;
+            cursor: pointer;
+            width:50px;
+            background: transparent;
+            border: none;
+            display:block;
+        `
+        );
+        tabList.appendChild(editBtn);
+
+        // 内容区 - 保持原有样式不变
         const contentList = document.createElement("div");
         contentList.className = "m-quill-tab-content-list";
         contentList.setAttribute(
@@ -49,31 +124,8 @@ class TabsBlot extends BlockEmbed {
         `
         );
 
-        // 生成标签按钮和内容面板
+        // 生成内容面板 - 保持原有样式不变
         tabs.forEach((tab, index) => {
-            // 标签按钮
-            const btn = document.createElement("button");
-            btn.className = `m-quill-tab-button`;
-            btn.setAttribute("data-index", index);
-            btn.textContent = tab.title;
-            btn.setAttribute(
-                "style",
-                `
-                padding: 10px 15px;
-                font-weight: 900;
-                color: #8f9099;
-                cursor: pointer;
-                background: transparent;
-                border: none;
-                margin-right: 60px;
-                cursor: pointer;
-                font-size:16px;
-                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
-            `
-            );
-            tabList.appendChild(btn);
-
-            // 内容面板 - 关键修改：设置为可编辑
             const panel = document.createElement("div");
             panel.className = `m-quill-tab-content`;
             panel.setAttribute("data-index", index);
@@ -85,88 +137,61 @@ class TabsBlot extends BlockEmbed {
                 min-height: 50px; 
             `
             );
-            panel.contentEditable = "false"; // 内容面板可编辑
+            panel.contentEditable = "false";
             contentList.appendChild(panel);
         });
 
-        // 编辑按钮
+        // 组装结构
-        const editBtn = document.createElement("button");
+        tabScrollContainer.appendChild(tabList);
-        editBtn.className = "m-quill-tab-edit-btn";
+        node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
-        editBtn.innerHTML = "编辑";
+        node.appendChild(contentList); // 内容区
-        editBtn.setAttribute("data-action", "edit");
-        editBtn.setAttribute(
-            "style",
-            `
 
-            padding: 10px;
+        // 标签页切换逻辑 - 保持原有逻辑不变
-            margin-left: auto;
-            color: #606266;
-            cursor: pointer;
-            background: transparent;
-            border: none;
-            display:block;
-        `
-        );
-        //  display: flex;
-        //align-items: center;
-        // editBtn.onmouseover = () => {
-        //     editBtn.style.color = "#007bff";
-        // };
-        // editBtn.onmouseout = () => {
-        //     editBtn.style.color = "#606266";
-        // };
-        tabList.appendChild(editBtn);
-
-        // 标签页切换逻辑
         const scriptTag = document.createElement("script");
-        // 修改 scriptTag.textContent 中的逻辑
         scriptTag.textContent = `
-                (function() {
+            (function() {
-                    const container = document.currentScript.parentElement;
+                const container = document.currentScript.parentElement;
-                    const isAdmin = window.location.pathname.includes('/admin');
+                const isAdmin = window.location.pathname.includes('/admin');
-                    const editBtn1 = container.querySelector('.m-quill-tab-edit-btn'); 
+                const editBtn1 = container.querySelector('.m-quill-tab-edit-btn'); 
                 
-                    // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
+                // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
-                    if (!isAdmin && editBtn1) {
+                if (!isAdmin && editBtn1) {
-                        editBtn1.style.display = 'none'; // 文章网站隐藏按钮
+                    editBtn1.style.display = 'none'; // 文章网站隐藏按钮
-                    } else if (isAdmin && editBtn1) {
+                } else if (isAdmin && editBtn1) {
-                        editBtn1.style.display = 'block'; // 管理系统强制显示按钮
+                    editBtn1.style.display = 'block'; // 管理系统强制显示按钮
-                    }
+                }
                 
-                    // 非管理系统才执行标签切换逻辑（管理系统不执行）
+                // 非管理系统才执行标签切换逻辑（管理系统不执行）
-                    if (!isAdmin) {
+                if (!isAdmin) {
-                        const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
+                    const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
-                        const contentPanels = container.querySelectorAll('.m-quill-tab-content');
+                    const contentPanels = container.querySelectorAll('.m-quill-tab-content');
-                        tabButtons.forEach(btn => {
+                    tabButtons.forEach(btn => {
-                            btn.addEventListener('click', function() {
+                        btn.addEventListener('click', function() {
-                                const index = parseInt(this.dataset.index);
+                            const index = parseInt(this.dataset.index);
-                                tabButtons.forEach((b, i) => {
+                            tabButtons.forEach((b, i) => {
-                                    b.setAttribute('style', \`
+                                b.setAttribute('style', \`
-                                        padding: 10px 15px;
+                                    font-weight: 900;
-                                        font-weight: 900;
+                                    cursor: pointer;
-                                        cursor: pointer;
+                                    background: transparent;
-                                        background: transparent;
+                                    font-size:16px;
-                                        font-size:16px;
+                                    margin-right: 5px;
-                                        margin-right: 60px;
+                                    color: #8f9099;
-                                        color: #8f9099;
+                                    border: none;
-                                        border: none;
+                                    \${i === index ? 
-                                        \${i === index ? 
+                                        'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' : 
-                                            'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' : 
+                                        ''
-                                            ''
+                                    }
-                                        }
+                                \`);
-                                    \`);
+                            });
-                                });
+                            contentPanels.forEach((panel, i) => {
-                                contentPanels.forEach((panel, i) => {
+                                panel.style.display = i === index ? 'block' : 'none';
-                                    panel.style.display = i === index ? 'block' : 'none';
-                                });
                             });
                         });
-                      }
+                    });
-                    })();
+                }
-                  `;
+            })();
+        `;
 
-        node.appendChild(tabList);
-        node.appendChild(contentList);
         node.appendChild(scriptTag);
         node.setAttribute("contenteditable", "false");
         return node;
@@ -177,15 +202,12 @@ class TabsBlot extends BlockEmbed {
             this.eventBoundElements = new WeakMap();
         }
 
-        // 移除 eventBoundElements 依赖，直接重新绑定事件（避免弱映射导致的问题）
+        // 编辑按钮事件 - 保持原有逻辑不变
         const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
         if (editBtn) {
-            // 先移除旧事件，避免重复绑定
             editBtn.removeEventListener("click", this.handleEditClick);
-            // 绑定新事件（使用箭头函数确保 this 指向正确）
             this.handleEditClick = e => {
                 e.stopPropagation();
-                console.log("1232323");
                 this.domNode.dispatchEvent(
                     new CustomEvent("edit-tabs", {
                         bubbles: true,
@@ -196,7 +218,7 @@ class TabsBlot extends BlockEmbed {
             editBtn.addEventListener("click", this.handleEditClick);
         }
 
-        // 标签切换事件
+        // 标签切换事件 - 保持原有逻辑不变
         const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
         tabButtons.forEach(btn => {
             if (!this.eventBoundElements.has(btn)) {
@@ -209,9 +231,8 @@ class TabsBlot extends BlockEmbed {
         });
     }
 
-    // 增强版删除键处理
+    // 增强版删除键处理 - 保持原有逻辑不变
     bindDeleteKeyEvent() {
-        // 阻止从外部删除整个组件
         this.domNode.addEventListener(
             "keydown",
             e => {
@@ -222,30 +243,26 @@ class TabsBlot extends BlockEmbed {
                     const range = selection.getRangeAt(0);
                     const parentBlock = this.domNode;
 
-                    // 判断光标是否在组件内部
                     const isInside = parentBlock.contains(range.commonAncestorContainer);
 
-                    // 如果光标在组件外部，阻止删除
                     if (!isInside) {
                         e.preventDefault();
                         return;
                     }
 
-                    // 检查是否选中了整个组件
                     if (
                         range.startContainer === parentBlock &&
                         range.endContainer === parentBlock &&
                         range.startOffset === 0 &&
                         range.endOffset >= parentBlock.childNodes.length
                     ) {
-                        e.preventDefault(); // 阻止删除整个组件
+                        e.preventDefault();
                     }
                 }
             },
             true
-        ); // 使用捕获阶段
+        );
 
-        // 标签栏禁止编辑
         const tabList = this.domNode.querySelector(".m-quill-tab-list");
         if (tabList) {
             tabList.querySelectorAll("*").forEach(el => {
@@ -258,17 +275,18 @@ class TabsBlot extends BlockEmbed {
         const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
         const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
 
+        // 保持原有样式逻辑不变
         buttons.forEach((btn, i) => {
             btn.setAttribute(
                 "style",
                 `
-                padding: 10px 15px;
+               
                 font-weight: 900;
                 cursor: pointer;
                 background: transparent;
                 border: none;
                 font-size:16px;
-                margin-right: 60px;
+                margin-right: 5px;
                 color: #8f9099;
                 border-bottom: 3px solid transparent;
                 ${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
@@ -279,6 +297,17 @@ class TabsBlot extends BlockEmbed {
         panels.forEach((panel, i) => {
             panel.style.display = i === index ? "block" : "none";
         });
+
+        // 滚动到当前选中的标签
+        const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
+        const activeBtn = buttons[index];
+        if (scrollContainer && activeBtn) {
+            activeBtn.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center"
+            });
+        }
     }
 
     static value(node) {
@@ -301,26 +330,23 @@ class TabsBlot extends BlockEmbed {
         const scriptTag = this.domNode.querySelector("script");
         if (scriptTag) {
             const newScript = document.createElement("script");
-
             newScript.textContent = scriptTag.textContent;
             scriptTag.parentNode.replaceChild(newScript, scriptTag);
         }
         this.bindEvents();
-        this.bindDeleteKeyEvent(); // 重新绑定删除事件
+        this.bindDeleteKeyEvent();
     }
 
     getValue() {
         return TabsBlot.value(this.domNode);
     }
 
-    // 更新标签页数据（编辑后更新 DOM）
+    // 更新标签页数据 - 保持原有逻辑不变
     updateContents(tabs) {
-        // 清空原有内容
         const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
         const tabList = this.domNode.querySelector(".m-quill-tab-list");
-        // 保留编辑按钮（如果需要）
         const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
-        // 清空标签栏和内容区（保留编辑按钮）
+
         Array.from(tabList.children).forEach(child => {
             if (!child.classList.contains("m-quill-tab-edit-btn")) {
                 child.remove();
@@ -328,9 +354,7 @@ class TabsBlot extends BlockEmbed {
         });
         contentList.innerHTML = "";
 
-        // 重新渲染标签页（复用 create 方法中的逻辑）
         tabs.forEach((tab, index) => {
-            // 重建标签按钮
             const btn = document.createElement("button");
             btn.className = "m-quill-tab-button";
             btn.setAttribute("data-index", index);
@@ -338,20 +362,18 @@ class TabsBlot extends BlockEmbed {
             btn.setAttribute(
                 "style",
                 `
-              padding: 10px 15px;
+                font-weight: 900;
-              font-weight: 900;
+                color: #8f9099;
-              color: #8f9099;
+                cursor: pointer;
-              cursor: pointer;
+                background: transparent;
-              background: transparent;
+                border: none;
-              border: none;
+                margin-right: 5px;
-              margin-right: 60px;
+                font-size:16px;
-              font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
-              ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
-          `
             );
-            tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
+            tabList.insertBefore(btn, editBtn);
 
-            // 重建内容面板
             const panel = document.createElement("div");
             panel.className = "m-quill-tab-content";
             panel.setAttribute("data-index", index);
@@ -359,15 +381,14 @@ class TabsBlot extends BlockEmbed {
             panel.setAttribute(
                 "style",
                 `
-              display: ${index === 0 ? "block" : "none"};
+                display: ${index === 0 ? "block" : "none"};
-              min-height: 50px; 
+                min-height: 50px; 
-          `
+            `
             );
             panel.contentEditable = "false";
             contentList.appendChild(panel);
         });
 
-        // 重新绑定事件（确保切换功能正常）
         this.bindEvents();
     }
 }

src/components/Editor/quill-tabs1.js

@@ -5,7 +5,7 @@ const BlockEmbed = Quill.import("blots/block/embed");
 class TabsBlot extends BlockEmbed {
     static blotName = "tabs";
     static tagName = "div";
-    static className = "quill-tabs";
+    static className = "m-quill-tabs";
 
     constructor(domNode) {
         super(domNode);
@@ -23,27 +23,100 @@ class TabsBlot extends BlockEmbed {
             `
             margin: 15px 0;
             overflow: hidden;
-            border: 1px solid #dddddd;
             border-radius: 4px;
             position: relative;
         `
         );
 
-        // 标签栏
+        // 标签栏滚动容器 - 添加隐藏滚动条样式
+        const tabScrollContainer = document.createElement("div");
+        tabScrollContainer.className = "m-quill-tab-scroll-container";
+        tabScrollContainer.setAttribute(
+            "style",
+            `
+            overflow-x: auto;
+            overflow-y: hidden;
+            
+            -webkit-overflow-scrolling: touch; /* 增强移动端滚动体验 */
+            scrollbar-width: none; /* Firefox 隐藏滚动条 */
+            -ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
+        `
+        );
+
+        // Chrome, Safari 隐藏滚动条
+        tabScrollContainer.style.overflow = "auto";
+        tabScrollContainer.style.webkitOverflowScrolling = "touch";
+        tabScrollContainer.style.scrollbarWidth = "none";
+        tabScrollContainer.style.msOverflowStyle = "none";
+
+        // 关键：隐藏滚动条但保留功能
+        tabScrollContainer.innerHTML = `
+            <style>
+                .m-quill-tab-scroll-container::-webkit-scrollbar {
+                    display: none; /* Chrome, Safari 隐藏滚动条 */
+                }
+            </style>
+        `;
+
+        // 标签栏 - 保持原有样式不变
         const tabList = document.createElement("div");
-        tabList.className = "quill-tab-list";
+        tabList.className = "m-quill-tab-list";
         tabList.setAttribute(
             "style",
             `
             display: flex;
-            background-color: #f8f9fa;
             border-bottom: 1px solid #dddddd;
+            min-width: max-content; /* 确保内容撑开容器 */
         `
         );
 
-        // 内容区
+        // 生成标签按钮 - 保持原有样式不变
+        tabs.forEach((tab, index) => {
+            const btn = document.createElement("button");
+            btn.className = `m-quill-tab-button`;
+            btn.setAttribute("data-index", index);
+            btn.textContent = tab.title;
+            btn.setAttribute(
+                "style",
+                `
+                padding: 1%;
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                margin-right: 1%;
+                cursor: pointer;
+                font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+            tabList.appendChild(btn);
+        });
+
+        // 编辑按钮 - 保持原有样式不变
+        const editBtn = document.createElement("button");
+        editBtn.className = "m-quill-tab-edit-btn";
+        editBtn.innerHTML = "编辑";
+        editBtn.setAttribute("data-action", "edit");
+        editBtn.setAttribute(
+            "style",
+            `
+            padding: 10px;
+            margin-left: auto;
+            color: #606266;
+            cursor: pointer;
+            width:50px;
+            background: transparent;
+            border: none;
+            display:block;
+        `
+        );
+        tabList.appendChild(editBtn);
+
+        // 内容区 - 保持原有样式不变
         const contentList = document.createElement("div");
-        contentList.className = "quill-tab-content-list";
+        contentList.className = "m-quill-tab-content-list";
         contentList.setAttribute(
             "style",
             `
@@ -51,106 +124,77 @@ class TabsBlot extends BlockEmbed {
         `
         );
 
-        // 生成标签按钮和内容面板
+        // 生成内容面板 - 保持原有样式不变
         tabs.forEach((tab, index) => {
-            // 标签按钮
-            const btn = document.createElement("button");
-            btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
-            btn.setAttribute("data-index", index);
-            btn.textContent = tab.title;
-            btn.setAttribute(
-                "style",
-                `
-                padding: 10px 15px;
-                font-weight: 500;
-                cursor: pointer;
-                background: transparent;
-                border: none;
-                transition: background-color 0.2s;
-                ${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
-            `
-            );
-            tabList.appendChild(btn);
-
-            // 内容面板 - 关键修改：设置为可编辑
             const panel = document.createElement("div");
-            panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
+            panel.className = `m-quill-tab-content`;
             panel.setAttribute("data-index", index);
             panel.innerHTML = tab.content;
             panel.setAttribute(
                 "style",
                 `
                 display: ${index === 0 ? "block" : "none"};
-                min-height: 50px; /* 确保有编辑区域 */
+                min-height: 50px; 
             `
             );
-            panel.contentEditable = "true"; // 内容面板可编辑
+            panel.contentEditable = "false";
             contentList.appendChild(panel);
         });
 
-        // 编辑按钮
+        // 组装结构
-        const editBtn = document.createElement("button");
+        tabScrollContainer.appendChild(tabList);
-        editBtn.className = "quill-tab-edit-btn";
+        node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
-        editBtn.innerHTML = "编辑";
+        node.appendChild(contentList); // 内容区
-        editBtn.setAttribute("data-action", "edit");
+
-        editBtn.setAttribute(
+        // 标签页切换逻辑 - 保持原有逻辑不变
-            "style",
-            `
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-left: auto;
-            color: #606266;
-            cursor: pointer;
-            background: transparent;
-            border: none;
-        `
-        );
-        editBtn.onmouseover = () => {
-            editBtn.style.color = "#007bff";
-        };
-        editBtn.onmouseout = () => {
-            editBtn.style.color = "#606266";
-        };
-        tabList.appendChild(editBtn);
-        // 标签页切换逻辑
         const scriptTag = document.createElement("script");
         scriptTag.textContent = `
             (function() {
                 const container = document.currentScript.parentElement;
-                const tabButtons = container.querySelectorAll('.quill-tab-button:not([data-action])');
+                const isAdmin = window.location.pathname.includes('/admin');
-                const contentPanels = container.querySelectorAll('.quill-tab-content');
+                const editBtn1 = container.querySelector('.m-quill-tab-edit-btn'); 
-                tabButtons.forEach(btn => {
-                    btn.addEventListener('click', function() {
-                        const index = parseInt(this.dataset.index);
-                        tabButtons.forEach((b, i) => {
-                            b.setAttribute('style', \`
-                                padding: 10px 15px;
-                                font-weight: 500;
-                                cursor: pointer;
-                                background: transparent;
-                                border: none;
-                                transition: background-color 0.2s;
-                                \${i === index ? 
-                                    'color: #007bff; background-color: white; border-bottom: 2px solid #007bff;' : 
-                                    ''
-                                }
-                            \`);
-                        });
                 
-                        contentPanels.forEach((panel, i) => {
+                // 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
-                            panel.style.display = i === index ? 'block' : 'none';
+                if (!isAdmin && editBtn1) {
+                    editBtn1.style.display = 'none'; // 文章网站隐藏按钮
+                } else if (isAdmin && editBtn1) {
+                    editBtn1.style.display = 'block'; // 管理系统强制显示按钮
+                }
+                
+                // 非管理系统才执行标签切换逻辑（管理系统不执行）
+                if (!isAdmin) {
+                    const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
+                    const contentPanels = container.querySelectorAll('.m-quill-tab-content');
+                    tabButtons.forEach(btn => {
+                        btn.addEventListener('click', function() {
+                            const index = parseInt(this.dataset.index);
+                            tabButtons.forEach((b, i) => {
+                                b.setAttribute('style', \`
+                                    padding: 1%;
+                                    font-weight: 900;
+                                    cursor: pointer;
+                                    background: transparent;
+                                    font-size:16px;
+                                    margin-right: 1%;
+                                    color: #8f9099;
+                                    border: none;
+                                    \${i === index ? 
+                                        'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' : 
+                                        ''
+                                    }
+                                \`);
+                            });
+                            contentPanels.forEach((panel, i) => {
+                                panel.style.display = i === index ? 'block' : 'none';
+                            });
                         });
                     });
-                });
+                }
             })();
         `;
 
-        // 组装结构 - 关键修改：移除contenteditable="false"
-        node.appendChild(tabList);
-        node.appendChild(contentList);
         node.appendChild(scriptTag);
-
+        node.setAttribute("contenteditable", "false");
         return node;
     }
 
@@ -159,10 +203,11 @@ class TabsBlot extends BlockEmbed {
             this.eventBoundElements = new WeakMap();
         }
 
-        // 编辑按钮事件
+        // 编辑按钮事件 - 保持原有逻辑不变
-        const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
-        if (editBtn && !this.eventBoundElements.has(editBtn)) {
+        if (editBtn) {
-            editBtn.addEventListener("click", e => {
+            editBtn.removeEventListener("click", this.handleEditClick);
+            this.handleEditClick = e => {
                 e.stopPropagation();
                 this.domNode.dispatchEvent(
                     new CustomEvent("edit-tabs", {
@@ -170,12 +215,12 @@ class TabsBlot extends BlockEmbed {
                         detail: { blot: this }
                     })
                 );
-            });
+            };
-            this.eventBoundElements.set(editBtn, true);
+            editBtn.addEventListener("click", this.handleEditClick);
         }
 
-        // 标签切换事件
+        // 标签切换事件 - 保持原有逻辑不变
-        const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
         tabButtons.forEach(btn => {
             if (!this.eventBoundElements.has(btn)) {
                 btn.addEventListener("click", () => {
@@ -187,9 +232,8 @@ class TabsBlot extends BlockEmbed {
         });
     }
 
-    // 增强版删除键处理
+    // 增强版删除键处理 - 保持原有逻辑不变
     bindDeleteKeyEvent() {
-        // 阻止从外部删除整个组件
         this.domNode.addEventListener(
             "keydown",
             e => {
@@ -200,31 +244,27 @@ class TabsBlot extends BlockEmbed {
                     const range = selection.getRangeAt(0);
                     const parentBlock = this.domNode;
 
-                    // 判断光标是否在组件内部
                     const isInside = parentBlock.contains(range.commonAncestorContainer);
 
-                    // 如果光标在组件外部，阻止删除
                     if (!isInside) {
                         e.preventDefault();
                         return;
                     }
 
-                    // 检查是否选中了整个组件
                     if (
                         range.startContainer === parentBlock &&
                         range.endContainer === parentBlock &&
                         range.startOffset === 0 &&
                         range.endOffset >= parentBlock.childNodes.length
                     ) {
-                        e.preventDefault(); // 阻止删除整个组件
+                        e.preventDefault();
                     }
                 }
             },
             true
-        ); // 使用捕获阶段
+        );
 
-        // 标签栏禁止编辑
+        const tabList = this.domNode.querySelector(".m-quill-tab-list");
-        const tabList = this.domNode.querySelector(".quill-tab-list");
         if (tabList) {
             tabList.querySelectorAll("*").forEach(el => {
                 el.contentEditable = "false";
@@ -233,20 +273,24 @@ class TabsBlot extends BlockEmbed {
     }
 
     selectTab(index) {
-        const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
+        const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
-        const panels = this.domNode.querySelectorAll(".quill-tab-content");
+        const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
 
+        // 保持原有样式逻辑不变
         buttons.forEach((btn, i) => {
             btn.setAttribute(
                 "style",
                 `
-                padding: 10px 15px;
+                padding: 1%;
-                font-weight: 500;
+                font-weight: 900;
                 cursor: pointer;
                 background: transparent;
                 border: none;
-                transition: background-color 0.2s;
+                font-size:16px;
-                ${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
+                margin-right: 1%;
+                color: #8f9099;
+                border-bottom: 3px solid transparent;
+                ${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
             `
             );
         });
@@ -254,21 +298,32 @@ class TabsBlot extends BlockEmbed {
         panels.forEach((panel, i) => {
             panel.style.display = i === index ? "block" : "none";
         });
+
+        // 滚动到当前选中的标签
+        const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
+        const activeBtn = buttons[index];
+        if (scrollContainer && activeBtn) {
+            activeBtn.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center"
+            });
+        }
     }
 
     static value(node) {
         const tabs = [];
-        const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
+        const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
-        const panels = node.querySelectorAll(".quill-tab-content");
+        const panels = node.querySelectorAll(".m-quill-tab-content");
 
         buttons.forEach((btn, i) => {
             tabs.push({
                 title: btn.textContent,
-                content: panels[i].innerHTML
+                content: panels[i]?.innerHTML || ""
             });
         });
 
-        return { tabs };
+        return tabs;
     }
 
     update(mutations, context) {
@@ -280,7 +335,63 @@ class TabsBlot extends BlockEmbed {
             scriptTag.parentNode.replaceChild(newScript, scriptTag);
         }
         this.bindEvents();
-        this.bindDeleteKeyEvent(); // 重新绑定删除事件
+        this.bindDeleteKeyEvent();
+    }
+
+    getValue() {
+        return TabsBlot.value(this.domNode);
+    }
+
+    // 更新标签页数据 - 保持原有逻辑不变
+    updateContents(tabs) {
+        const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
+        const tabList = this.domNode.querySelector(".m-quill-tab-list");
+        const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
+
+        Array.from(tabList.children).forEach(child => {
+            if (!child.classList.contains("m-quill-tab-edit-btn")) {
+                child.remove();
+            }
+        });
+        contentList.innerHTML = "";
+
+        tabs.forEach((tab, index) => {
+            const btn = document.createElement("button");
+            btn.className = "m-quill-tab-button";
+            btn.setAttribute("data-index", index);
+            btn.textContent = tab.title;
+            btn.setAttribute(
+                "style",
+                `
+                padding: 1%;
+                font-weight: 900;
+                color: #8f9099;
+                cursor: pointer;
+                background: transparent;
+                border: none;
+                margin-right: 1%;
+                font-size:16px;
+                ${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
+            `
+            );
+            tabList.insertBefore(btn, editBtn);
+
+            const panel = document.createElement("div");
+            panel.className = "m-quill-tab-content";
+            panel.setAttribute("data-index", index);
+            panel.innerHTML = tab.content;
+            panel.setAttribute(
+                "style",
+                `
+                display: ${index === 0 ? "block" : "none"};
+                min-height: 50px; 
+            `
+            );
+            panel.contentEditable = "false";
+            contentList.appendChild(panel);
+        });
+
+        this.bindEvents();
     }
 }
 

src/components/Editor/quill-tabs222.js

@@ -1,180 +0,0 @@
-import { Quill } from "@vueup/vue-quill";
-
-const BlockEmbed = Quill.import("blots/block/embed");
-
-class TabsBlot extends BlockEmbed {
-    static blotName = "tabs";
-    static tagName = "div";
-    static className = "quill-tabs";
-
-    constructor(domNode) {
-        super(domNode);
-        this.bindEvents();
-    }
-
-    static create(value) {
-        const tabs = Array.isArray(value) ? value : [];
-        const node = super.create(value);
-
-        // 主容器样式
-        node.setAttribute(
-            "style",
-            `
-            margin: 15px 0;
-            overflow: hidden;
-            border: 1px solid #dddddd;
-            border-radius: 4px;
-            position: relative;
-        `
-        );
-
-        // 标签栏容器
-        const tabList = document.createElement("div");
-        tabList.className = "quill-tab-list";
-        tabList.style.cssText = `
-            display: flex;
-            background-color: #f8f9fa;
-            border-bottom: 1px solid #dddddd;
-        `;
-
-        // 内容区容器
-        const contentList = document.createElement("div");
-        contentList.className = "quill-tab-content-list";
-        contentList.style.cssText = "padding: 15px;";
-
-        // 生成标签和内容
-        tabs.forEach((tab, index) => {
-            // 标签按钮
-            const btn = document.createElement("button");
-            btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
-            btn.dataset.index = index;
-            btn.textContent = tab.title || `标签${index + 1}`;
-            btn.style.cssText = `
-                padding: 10px 15px;
-                font-weight: 500;
-                cursor: pointer;
-                background: transparent;
-                border: none;
-                ${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
-            `;
-            tabList.appendChild(btn);
-
-            // 内容面板
-            const panel = document.createElement("div");
-            panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
-            panel.dataset.index = index;
-            panel.innerHTML = tab.content || "";
-            panel.style.display = index === 0 ? "block" : "none";
-            contentList.appendChild(panel);
-        });
-
-        // 编辑按钮
-        const editBtn = document.createElement("button");
-        editBtn.className = "quill-tab-edit-btn";
-        editBtn.textContent = "编辑";
-        editBtn.dataset.action = "edit";
-        editBtn.style.cssText = `
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-left: auto;
-            color: #606266;
-            cursor: pointer;
-            background: transparent;
-            border: none;
-        `;
-        editBtn.onmouseover = () => (editBtn.style.color = "#007bff");
-        editBtn.onmouseout = () => (editBtn.style.color = "#606266");
-        tabList.appendChild(editBtn);
-
-        // 组装DOM
-        node.appendChild(tabList);
-        node.appendChild(contentList);
-        node.contentEditable = "false";
-
-        return node;
-    }
-
-    // 改进的事件绑定方法，避免重复绑定
-    bindEvents() {
-        // 使用WeakMap存储已绑定的元素，避免重复绑定
-        if (!this.eventBoundElements) {
-            this.eventBoundElements = new WeakMap();
-        }
-
-        // 编辑按钮事件
-        const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
-        if (editBtn && !this.eventBoundElements.has(editBtn)) {
-            editBtn.addEventListener("click", e => {
-                e.stopPropagation();
-                this.domNode.dispatchEvent(
-                    new CustomEvent("edit-tabs", {
-                        bubbles: true,
-                        detail: { blot: this }
-                    })
-                );
-            });
-            this.eventBoundElements.set(editBtn, true);
-        }
-
-        // 标签切换事件
-        const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
-        tabButtons.forEach(btn => {
-            if (!this.eventBoundElements.has(btn)) {
-                btn.addEventListener("click", () => {
-                    const index = parseInt(btn.dataset.index, 10);
-                    this.selectTab(index);
-                });
-                this.eventBoundElements.set(btn, true);
-            }
-        });
-    }
-
-    // 移除了有问题的unbindEvents方法
-
-    selectTab(index) {
-        const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
-        const panels = this.domNode.querySelectorAll(".quill-tab-content");
-
-        if (index < 0 || index >= buttons.length) return;
-
-        // 更新按钮样式
-        buttons.forEach((btn, i) => {
-            btn.style.cssText = `
-                padding: 10px 15px;
-                font-weight: 500;
-                cursor: pointer;
-                background: transparent;
-                border: none;
-                ${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
-            `;
-        });
-
-        // 更新内容面板显示
-        panels.forEach((panel, i) => {
-            panel.style.display = i === index ? "block" : "none";
-        });
-    }
-
-    static value(node) {
-        const tabs = [];
-        const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
-        const panels = node.querySelectorAll(".quill-tab-content");
-
-        buttons.forEach((btn, i) => {
-            tabs.push({
-                title: btn.textContent,
-                content: panels[i]?.innerHTML || ""
-            });
-        });
-
-        return tabs;
-    }
-
-    update(mutations, context) {
-        super.update(mutations, context);
-        this.bindEvents();
-    }
-}
-
-export default TabsBlot;

src/components/Editor/quill-video.js

@@ -14,8 +14,16 @@ class Video extends BlockEmbed {
         node.setAttribute("webkit-playsinline", "true");
         node.setAttribute("type", "video/mp4");
         // poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
-        node.setAttribute("poster", value.poster);
+        // console.log(value.url, "= value.poster=");
+        // node.setAttribute("poster", this.sanitize(value.url));
         node.setAttribute("src", this.sanitize(value.url));
+        node.setAttribute(
+            "style",
+            `
+            width: 600px;
+             height: 300px;
+            `
+        );
         return node;
     }
 
@@ -35,8 +43,8 @@ class Video extends BlockEmbed {
     static value(domNode) {
         // 设置自定义的属性值
         return {
-            url: domNode.getAttribute("src"),
+            url: domNode.getAttribute("src")
-            poster: domNode.getAttribute("poster")
+            // poster: domNode.getAttribute("src")
         };
     }