Customize shortcut keys in Angular Rich text editor component

27 Apr 20242 minutes to read

It can be achieved by using formatter property. You need to create customformatterModel to configure the keyConfig using IHtmlFormatterModel class and assign the same to the formatter property. Here, ctrl+q is configured to open the Insert Hyperlink dialog.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, IHtmlFormatterModel, HTMLFormatter } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [RichTextEditorModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id='editor' #sample [formatter]='formatter' [value]='value'>
  </ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
  public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when editor is blurred and changes are done to the content.</li><li>focus - Triggers when editor is focused in.</li><li>blur - Triggers when editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
  public customHTMLModel: IHtmlFormatterModel = { // formatter is used to configure the custom key
    keyConfig: {
      'insert-link': 'ctrl+q', // confite the desired key
    }
  };
  public formatter: HTMLFormatter = new HTMLFormatter(this.customHTMLModel); // to configure custom key
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You need to import IHtmlFormatterModel and HTMLFormatter to configure the shortcut key.