Custom block

Code

<button type="button" id="entry-custom-block-get-json">Get JSON</button>
<div id="entry-custom-block"></div>

class CalloutBlock extends Redactor.Block {
    static meta = {
        type: 'callout',
        label: 'Callout',
        editable: true
    };

    createEl() {
        const el = document.createElement('div');
        el.className = 'callout';
        return el;
    }

    init(data = {}) {
        if (data.content !== undefined) {
            this._syncInnerHtmlBlocks(this.el, data.content);
        }
    }

    getData() {
        return {
            ...super.getData(),
            content: this.el.innerHTML.trim()
        };
    }

    static match(el) {
        return el.dataset?.block === 'callout';
    }
}

Redactor.addBlock('callout', CalloutBlock);

const app = Redactor('#entry-custom-block', {
    content: '<div data-block="callout" class="callout">Custom callout block.</div>'
});

document.getElementById('entry-custom-block-get-json').addEventListener('click', () => {
    console.log(app.output.getValue({ format: 'json' }));
});