自定義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);

 

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