How to add custom short keys for different header text options in richtext editor

[Darek Johnson]

Hi,
I have used keyConfig in formatter to use custom short cut keys for other options,but i am not able to set short cut keys for header texts

[Buvana Sathasivam]

Hi Darek,

Greetings from Syncfusion support.

You will be able to apply different header text options using a custom key configured with the executeCommand method. In the below sample, we have configured the ctrl+shift+k key into h1 format and the ctrl+shift+r key into h2 format.

index.js

 keydownFunction(event) {

    if (event.ctrlKey == true && event.shiftKey == true && event.which == 75) {

      this.ej2_instances[0].executeCommand('formatBlock', 'h1');

    } else if (

      event.ctrlKey == true &&

      event.shiftKey == true &&

      event.which == 82

    ) {

      this.ej2_instances[0].executeCommand('formatBlock', 'h2');

    }

  }

  create() { // Triggered after created RTE

    this.rteObj.element.addEventListener(

      'keydown',

      this.keydownFunction,

      false

    ); // Bind keydown event

  }

  render() {

    return (

            <RichTextEditorComponent

              id="defaultRTE"

              ref={(richtexteditor) => {

                this.rteObj = richtexteditor;

              }}

              created={this.create.bind(this)}

            >…..

              <Inject

                services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}

              />

            </RichTextEditorComponent>

    );

}

Sample: https://stackblitz.com/edit/react-zxwrp2?file=index.js

Regards,

Buvana S