Search results

KeyBoard Support

The RichTextEditor has full keyboard accessibility that includes shortcuts to open and other actions with toolbar items, drop-down lists, and dialogs.

HTML Formation Key config List

When the RichTextEditor render with HTML editMode, it has predefined set of key configurations as follows.

Key Description
toolbar-focus alt+f10
escape 27
insert-link ctrl+k
insert-image ctrl+shift+i
undo ctrl+z
redo ctrl+y
copy ctrl+c
cut ctrl+x
paste ctrl+v
bold ctrl+b
italic ctrl+i
underline ctrl+u
strikethrough ctrl+shift+s
uppercase ctrl+shift+u
lowercase ctrl+shift+l
superscript ctrl+shift+=
subscript ctrl+=
indents ctrl+]
outdents ctrl+[
html-source ctrl+shift+h
full-screen ctrl+shift+f
decrease-fontsize ctrl+shift+<
increase-fontsize ctrl+shift+>
justify-center ctrl+e
justify-full ctrl+j
justify-left ctrl+l
justify-right ctrl+r
clear-format ctrl+shift+r
ordered-list ctrl+shift+o
unordered-list ctrl+alt+o
Source
Preview
index.js
index.html
var defaultRTE = new ej.richtexteditor.RichTextEditor({
    toolbarSettings: {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    }
});
defaultRTE.appendTo('#defaultRTE');
document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.
        defaultRTE.focusIn();
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
            <p>The rich text editor is WYSIWYG (&quot;what you see is what you get&quot;) 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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>
              <li><p>Provides HTML view to edit the source directly for developers.</p></li>
              <li><p>Supports third-party library integration.</p></li>
              <li><p>Allows preview of modified content before saving it.</p></li>
              <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
              <li><p>Contains undo/redo manager.</p></li>
              <li><p>Creates bulleted and numbered lists.</p></li>
              </ul>
        </div>
    </div>
    <style>
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
                content: "\e76e";
            }
        
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
                content: "\e726";
            }
        </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Markdown formation key config list

When the RichTextEditor render with Markdown edit mode, it has predefined set of key configurations as follows.

Key Description
toolbar-focus alt+f10
escape 27
insert-link ctrl+k
insert-image ctrl+shift+i
undo ctrl+z
redo ctrl+y
copy ctrl+c
cut ctrl+x
paste ctrl+v
bold ctrl+b
italic ctrl+i
strikethrough ctrl+shift+s
uppercase ctrl+shift+u
lowercase ctrl+shift+l
superscript ctrl+shift+=
subscript ctrl+=
full-screen ctrl+shift+f
ordered-list ctrl+shift+o
unordered-list ctrl+alt+o
Source
Preview
index.js
index.html
var defaultRTE = new ej.richtexteditor.RichTextEditor({
    editorMode: 'Markdown',
    toolbarSettings: {
        items: ['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', '|', 'Undo', 'Redo']
    }
});
defaultRTE.appendTo('#defaultRTE');
document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.
        defaultRTE.focusIn();
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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">
    
    
   
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <div id="defaultRTE">
In RichTextEditor , you click the toolbar buttons to format the words and the changes are visible immediately. 
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
and phrases should look different from each other

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/).

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content            
        </div>
    </div>
    <style>
        .e-richtexteditor textarea.e-content {
            float: left;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
        .e-richtexteditor .e-rte-content .e-content{
            min-height: 150px;
        }
    
        .e-richtexteditor .e-rte-content {
            overflow: hidden;
        }
    
        .e-icon-btn.e-active .e-md-preview::before {
            content: '\e350';
        }
    
        .e-icon-btn .e-md-preview::before {
            content: '\e345';
        }
    
        .e-rte-content .e-content {
            float: right;
            width: 50%;
            overflow: auto;
            height: inherit;
            padding: 8px;
            height: 100%;
        }
    
        .e-rte-content .e-content.e-pre-source {
            width: 100%;
        }
    
        .highcontrast .e-richtexteditor textarea.e-content {
            border-right: 1px solid #fff;
        }
    
        .sb-header {
            z-index: 100;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Custom key config

Customize the key config for the keyboard interaction of RichTextEditor, using the keyConfig property.

In the following sample, customize the cut, copy, paste toolbar action with ctrl+1, ctrl+2, ctrl+3, respectively.

Source
Preview
index.js
index.html
var defaultRTE = new ej.richtexteditor.RichTextEditor({
    toolbarSettings: {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    },
    keyConfig: {
        'copy': 'ctrl+1',
        'cut': 'ctrl+2',
        'paste': 'ctrl+3'
    }
});
defaultRTE.appendTo('#defaultRTE');
document.onkeyup = function (e) {
    if (e.altKey && e.keyCode === 84 /* t */) {
        // press alt+t to focus the component.
        defaultRTE.focusIn();
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
            <p>The rich text editor is WYSIWYG (&quot;what you see is what you get&quot;) 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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>
              <li><p>Provides HTML view to edit the source directly for developers.</p></li>
              <li><p>Supports third-party library integration.</p></li>
              <li><p>Allows preview of modified content before saving it.</p></li>
              <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
              <li><p>Contains undo/redo manager.</p></li>
              <li><p>Creates bulleted and numbered lists.</p></li>
              </ul>
        </div>
    </div>
    <style>
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
                content: "\e76e";
            }
        
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
                content: "\e726";
            }
        </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also