自定义Quill.js 扩展属性,定义Delta输出存档

搬砖么,能怎么搬, 为什么不花时间去研究

let BlockEmbed = Quill.import('blots/block/embed');
class CustomImgBlot extends BlockEmbed {
    static get ATTRIBUTES() {
        // 声明元素属性值
        return ['class','data-alt','data-title'];
    }
    static create(opt) {
        let node = super.create();
        node.setAttribute('class', 'customImg');
        node.setAttribute('contentEditable', 'false');
        if ("object" == typeof opt) {
            // 这里可以针对node元素的innerHTML添加自己的HTML
        }
        return node;
    }

    static value(domNode) {
        // 输出Delta内部内容
        return domNode.innerHTML;
    }
    // 这里针对Delta attributes的输出
    static formats(domNode) {
        return this.ATTRIBUTES.reduce(function (formats, attribute) {
            if (domNode.hasAttribute(attribute)) {
                formats[attribute] = domNode.getAttribute(attribute);
            }
            return formats;
        }, {});
    }
    
    format(name, value) {
        if (this.constructor.ATTRIBUTES.indexOf(name) > -1) {
            if (value) {
                this.domNode.setAttribute(name, value);
            } else {
                this.domNode.removeAttribute(name);
            }
        } else {
            super.format(name, value);
        }
    }
}
CustomImgBlot.blotName = 'customImg';
CustomImgBlot.tagName = 'cimg';
Quill.register(CustomImgBlot);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章