Having trouble getting help?
Contact Support
Contact Support
Customize shortcut keys in React Rich text editor component
20 Jan 20237 minutes to read
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.
[Class-component]
import { Count, HtmlEditor, HTMLFormatter, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
customHTMLModel = {
// formatter is used to configure the custom key
keyConfig: {
'insert-link': 'ctrl+q', // confite the desired key
}
};
formatter = new HTMLFormatter(this.customHTMLModel);
// to configure custom key
render() {
return (<RichTextEditorComponent value={this.rteValue} formatter={this.formatter}>
<Inject services={[Toolbar, Count, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;
import { Count, HtmlEditor, HTMLFormatter, IHtmlFormatterModel, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private rteValue: string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
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
public render() {
return (
<RichTextEditorComponent formatter={this.formatter} value={this.rteValue}>
<Inject services={[Toolbar, Count, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;
[Functional-component]
import { Count, HtmlEditor, HTMLFormatter, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
let customHTMLModel = {
// formatter is used to configure the custom key
keyConfig: {
'insert-link': 'ctrl+q', // confite the desired key
}
};
let formatter = new HTMLFormatter(customHTMLModel);
// to configure custom key
return (<RichTextEditorComponent formatter={formatter} value={rteValue}>
<Inject services={[Toolbar, Count, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;
import { Count, HtmlEditor, HTMLFormatter, IHtmlFormatterModel, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteValue:string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
let customHTMLModel: IHtmlFormatterModel = {
// formatter is used to configure the custom key
keyConfig: {
'insert-link': 'ctrl+q', // confite the desired key
}
};
let formatter: any = new HTMLFormatter(customHTMLModel); // to configure custom key
return (
<RichTextEditorComponent formatter={formatter} value={rteValue}>
<Inject services={[Toolbar, Count, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;
We need to import
IHtmlFormatterModel
andHTMLFormatter
to configure the shortcut key.