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 { ToolbarService, LinkService, ImageService } from '@syncfusion/ej2-angular-richtexteditor';
import { HtmlEditorService, IHtmlFormatterModel, HTMLFormatter } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
template: `<ejs-richtexteditor id='defaultRTE' #sample [formatter]='formatter'>
<ng-template #valueTemplate>
<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 RTE is blurred and changes are done to the content.</li>
<li>focus - Triggers when RTE is focused in.</li>
<li>blur - Triggers when RTE 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>
</ng-template>
</ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService ]
})
export class AppComponent {
public customHTMLModel: IHtmlFormatterModel = { // formatter is used to configure the custom key
keyConfig: {
'insert-link': 'ctrl+q', // confite the desired key
}
};
public formatter: any = new HTMLFormatter(this.customHTMLModel); // to configure custom key
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RichTextEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion Angular Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<app-root>
<div id='loader'>Loading....</div>
</app-root>
</body>
</html>You need to import
IHtmlFormatterModelandHTMLFormatterto configure the shortcut key.