// 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;