feat: 🚀 生产环境

src/components/Editor/index.vue

@@ -29,8 +29,8 @@
         <QuillEditor
             id="mainEditor"
             ref="myQuillEditor"
-            contentType="html"
             v-model:content="editorContent"
+            contentType="html"
             @update:content="onContentChange"
             :options="options"
         />
@@ -53,7 +53,6 @@
                 editable
                 @edit="handleTabsEdit"
                 @tab-change="handleTabChange"
-                v-if="tabsData.length"
             >
                 <!-- 标签页：标题支持编辑 -->
                 <el-tab-pane
@@ -113,8 +112,7 @@
 <script setup name="Editor">
 import { QuillEditor, Quill } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-// /computed
+import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
-import { getCurrentInstance, reactive, ref, toRaw, 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: () => {
+    get: () => props.content,
-        return 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();
-        initTitle();
+    // 监听编辑按钮点击事件
-        // 监听编辑按钮点击事件
+    const editorEl = document.querySelector(".ql-editor");
-        const editorEl = document.querySelector(".ql-editor");
+    if (editorEl) {
-        if (editorEl) {
+        editorEl.addEventListener("edit-tabs", e => {
-            editorEl.addEventListener("edit-tabs", e => {
+            console.log(1232, "测试");
-                console.log(e.detail.blot, "=e.detail=");
+            console.log(e.detail.blot, "=e.detail=");
-                const tabsData = TabsBlot.value(e.detail.blot.domNode);
+            const tabsData = TabsBlot.value(e.detail.blot.domNode);
-                if (tabsData.length > 0) {
+            console.log(tabsData, "=tabsData=");
-                    // 保存当前编辑的标签页引用
+            if (tabsData.length > 0) {
-                    currentEditingTabsRef.value = e.detail.blot;
+                // 保存当前编辑的标签页引用
-                    // 加载数据到弹窗
+                currentEditingTabsRef.value = e.detail.blot;
-                    loadTabsDataToEditor(tabsData);
+                console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
-                    // 显示弹窗
+                // 加载数据到弹窗
-                    outerVisible.value = true;
+                loadTabsDataToEditor(tabsData);
-                }
+                // 显示弹窗
-            });
+                outerVisible.value = true;
-        }
+            }
-    });
+        });
+    }
 });
 
 defineExpose({
@@ -674,4 +669,3 @@ defineExpose({
     margin: -2px 0; /* 与标签对齐 */
 }
 </style>
-./quill-image1111