50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
// 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;
|