feat: 🚀 div标签解析

src/components/Editor/quill-detail-div.js

@@ -0,0 +1,49 @@
+// quill-dynamic-div.js
+import { Quill } from "@vueup/vue-quill";
+const Block = Quill.import("blots/block");
+
+class DynamicDivBlot extends Block {
+    // 从 DOM 节点创建 Blot 时，保留所有属性和类名
+    static create(value) {
+        const node = super.create();
+        // 如果是从数据恢复（value 存在），还原类名
+        if (value?.className) {
+            node.className = value.className; // 直接设置完整类名字符串（支持多类名）
+        }
+        // 保留其他属性（如 id、data-* 等，按需添加）
+        if (value?.attrs) {
+            Object.keys(value.attrs).forEach(key => {
+                node.setAttribute(key, value.attrs[key]);
+            });
+        }
+        return node;
+    }
+
+    // 从 Blot 提取值（序列化时用），保留所有类名和属性
+    static value(node) {
+        return {
+            className: node.className, // 保留完整类名（如 "o_detail_all big"）
+            attrs: Array.from(node.attributes).reduce((attrs, attr) => {
+                attrs[attr.name] = attr.value;
+                return attrs;
+            }, {}) // 保留所有属性
+        };
+    }
+
+    // 格式化时识别所有 div 标签
+    static formats(domNode) {
+        // 只要是 div 标签，就返回其类名和属性（确保 Quill 不清理）
+        return {
+            className: domNode.className,
+            attrs: Array.from(domNode.attributes).reduce((attrs, attr) => {
+                attrs[attr.name] = attr.value;
+                return attrs;
+            }, {})
+        };
+    }
+}
+
+DynamicDivBlot.blotName = "dynamicDiv"; // 唯一标识
+DynamicDivBlot.tagName = "div"; // 处理所有 div 标签
+
+export default DynamicDivBlot;