1

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?

1

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'); 
                }
            }
        ]
    },

];
  • I am not able to get this to work, can you provide any more input on how to get this working? – bemon Aug 30 at 0:09
  • Has anyone succeeded to access the underlying quill api ? – Hugo Sep 16 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.