[SalesForce] How to extend the rich text input of lwc with custom buttons to add new commands

Documentation of the lwc component for rich text input
(lightning-input-rich-text …) indicates that you can add custom buttons.

<lightning-input-rich-text
    custom-buttons={myCustomButtons}>
</lightning-input-rich-text>

the example shows how to pop up an alert when a custom button is pressed which does make limited sense….

handler: function () {
         alert('Like Button Clicked');
}

I need to add custom buttons to allow for header formatting (which is not included in the standard button list).
How can I access the underlying editor (quill) functions to make selected text formatted with header tags?

Best Answer

Chrome debugger of the component indicates, that the handler function has acccess to "this.quill" which makes available the quill API. Hence to format the current select with a button click as heading 1 with this.quill.format('header','h1');

The full code snipped then is 

 customButtons = [
    {
        category: "FORMAT_TEXT",
        label: 'Format Text',
        buttons: [
            {
                value: 'like',
                label: 'Like',
                iconName: 'utility:like',
                format: 'like',
                handler: function () {
                    // format selection to be h1...
                    this.quill.format('header', 'h1'); 
                }
            }
        ]
    },

];
Related Topic