Search results

Customize shortcut keys

It can be achieved by using formatter property. We 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.

Source
Preview
index.ts
index.html
import { RichTextEditor, Toolbar, Link, Image, Count, IHtmlFormatterModel, HTMLFormatter, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar);

let customHTMLModel: IHtmlFormatterModel = { // formatter is used to configure the custom key
    keyConfig: {
        'insert-link': 'ctrl+q', // configure the desired key
    }
};

let defaultRTE: RichTextEditor = new RichTextEditor({
    formatter: new HTMLFormatter(customHTMLModel), // to configure custom key
});
defaultRTE.appendTo('#defaultRTE');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 RichTextEditor</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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/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-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/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 rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Great+Vibes">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>

</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='defaultRTE'>
            <p>The rich text editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid <a href="https://ej2.syncfusion.com/home/" target="_blank">HTML markup</a> or <a href="https://ej2.syncfusion.com/home/"
                    target="_blank">markdown</a> of the content</p>
            <p><b>Key features:</b></p>
            <ul>
                <li>
                    <p>Provides <b>IFRAME</b> and <b>DIV</b> modes</p>
                </li>
                <li>
                    <p>Capable of handling markdown editing.</p>
                </li>
                <li>
                    <p>Contains a modular library to load the necessary functionality on demand.</p>
                </li>
                <li>
                    <p>Provides a fully customizable toolbar.</p>
                </li>
            </ul>
        </div>
    </div>
    <style>

    </style>
</body>

</html>

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