Keyboard support in Vue Rich text editor component

20 Mar 202524 minutes to read

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

HTML editor shortcut keys

You can use the following keyboard shortcuts when the Rich Text Editor is set to editorMode as HTML.

Toolbar

The toolbar shortcuts allow quick navigation and interaction with the toolbar elements, including focusing, moving between tools, and executing actions like closing menus and dialogs.

Actions Windows Mac
Focus on toolbar Alt + F10 ⌥ + F10
Move to the next tool → →, ⌘ + F
Move to the previous tool ← ←, ⌘ + F
Close dropdowns/menu and dialogs Esc Esc
Execute the currently focused tool action Enter, Space Enter, Space

Content editing and formatting

These keyboard shortcuts allow for quick access to content editing features like bold, italic, and text selection.

Actions Windows Mac
Select all content Ctrl + A ⌘ + A
Insert a hard line break (a new paragraph) Enter Enter
Insert a soft line break (without starting a new paragraph) Shift + Enter ⇧ + Enter
Make text bold Ctrl + B ⌘ + B
Italicize text Ctrl + I ⌘ + I
Apply strikethrough Ctrl + Shift + S ⌘ + ⇧ + S
Insert inline code Ctrl + ` ⌘ + `
Create link Ctrl + K ⌘ + K
Copy format painter Alt + Shift + C ⌥ + ⌘ + C
Paste format painter Alt + Shift + V ⌥ + ⌘ + V
Clear the copy format painter Esc Esc
Tab space (when enableTabKey is enabled) Tab Tab

Inserting

These shortcuts enable you to quickly insert tables, images, audio, and videos into your content.

Actions Windows Mac
Open the insert table dialog Ctrl + Shift + E ⌘ + ⇧ + E
Open the insert image dialog Ctrl + Shift + I ⌘ + ⇧ + I
Open the insert audio dialog Ctrl + Shift + A ⌘ + ⇧ + A
Open the insert video dialog Ctrl + Alt + V ⌘ + ⌥ + V

Table cell

These shortcuts assist in navigating between table cells and managing table rows easily.

Actions Windows Mac
Move the selection to the next cell Tab Tab
Move the selection to the previous cell Shift + Tab ⇧ + Tab
Insert a new table row (when in the last cell) Tab Tab
Navigate through the table (using arrow keys) ↑ , → , ↓ , ← ↑ , → , ↓ , ←

Text manipulation

These shortcuts allow you to manipulate text, such as changing case or applying superscript/subscript formatting.

Actions Windows Mac
Convert text to uppercase Ctrl + Shift + U ⌘ + ⇧ + U
Convert text to lowercase Ctrl + Shift + L ⌘ + ⇧ + L
Apply superscript Ctrl + Shift + = ⌘ + ⇧ + =
Apply subscript Ctrl + = ⌘ + =

Alignment and formatting

These shortcuts help you quickly adjust text alignment and formatting, such as left, center, or right justification.

Actions Windows Mac
Align text to the center Ctrl + E ⌘ + E
Justify text Ctrl + J ⌘ + J
Align text to the left Ctrl + L ⌘ + L
Align text to the right Ctrl + R ⌘ + R

List and indentation

These shortcuts help with creating and adjusting ordered and unordered lists, and modifying indentations.

Actions Windows Mac
Increase indent Ctrl + ] ⌘ + ]
Decrease indent Ctrl + [ ⌘ + [
Create an ordered list Ctrl + Shift + O ⌘ + ⇧ + O
Create an unordered list Ctrl + Alt + O ⌘ + ⌥ + O

Clipboard operations

These shortcuts streamline copying, cutting, pasting, and pasting content as plain text.

Actions Windows Mac
Copy the selected content Ctrl + C ⌘ + C
Cut the selected content Ctrl + X ⌘ + X
Paste the copied or cut content Ctrl + V ⌘ + V
Paste content as plain text Ctrl + Shift + V ⌘ + ⌥ + ⇧ + V

Undo & redo

These shortcuts allow you to quickly undo and redo changes to your content.

Actions Windows Mac
Undo Ctrl + Z ⌘ + Z
Redo Ctrl + Y ⌘ + Y

Other actions

These miscellaneous shortcuts help with actions like toggling fullscreen, clearing formatting, and accessing the HTML source.

Actions PC Mac
View HTML source Ctrl + Shift + H ⌘ + ⇧ + H
Toggle full screen mode Ctrl + Shift + F ⌘ + ⇧ + F
Exit Full screen Esc Esc
Clear all formatting Ctrl + Shift + R ⌘ + ⇧ + R 
<template>
  <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData">
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user
      experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides IFRAME and DIV 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>
    </ul>
  </ejs-richtexteditor>
</template>
<script setup>
import { provide, onMounted, ref } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, HtmlEditor, Image, QuickToolbar, Link, FormatPainter } from '@syncfusion/ej2-vue-richtexteditor';
const defaultRTE = ref(null);
const toolbarData = {
  items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
    'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
    'LowerCase', 'UpperCase', '|',
    'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
    'Outdent', 'Indent', '|',
    'CreateLink', 'Image', '|', 'FormatPainter', 'ClearFormat', 'Print',
    'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
}
onMounted(() => {
  document.addEventListener('keyup', onKeyUp);
});
const onKeyUp = (e) => {
  if (e.altKey && e.keyCode === 84) { /* t */
    // press alt+t to focus the component.
    defaultRTE.value.ej2Instances.focusIn();
  }
}
provide('richtexteditor', [Toolbar, HtmlEditor, Image, QuickToolbar, Link, FormatPainter]);
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData">
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides IFRAME and DIV 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>
    </ul>
  </ejs-richtexteditor>
</template>
<script>
import { RichTextEditorComponent, Toolbar, HtmlEditor, Image, QuickToolbar, Link, FormatPainter } from '@syncfusion/ej2-vue-richtexteditor';
export default {
name: "App",
components: {
"ejs-richtexteditor":RichTextEditorComponent
},
    data() {
      return {
        toolbarData: {
          items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'FormatPainter', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
        }
      }
    },
    mounted() {
      document.addEventListener('keyup', this.onKeyUp);
    },
    methods: {
      onKeyUp (e) {
        if (e.altKey && e.keyCode === 84) { /* t */
          // press alt+t to focus the component.
          this.$refs.defaultRTE.ej2Instances.focusIn();
        }
      }
    },
    provide: {
      richtexteditor: [Toolbar, HtmlEditor, Image, QuickToolbar, Link, FormatPainter ]
    }
  }
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>

Custom key config

You can able to customize the key config for the keyboard interaction of Rich Text Editor, using keyConfig property.

In the below sample, you have customize the bold, italic, underline toolbar action with ctrl+alt+b, ctrl+alt+i and ctrl+alt+u respectively.

<template>
  <ejs-richtexteditor ref="defaultRTE" :height="340" :value="rteValue" :toolbarSettings="toolbarData" :keyConfigs="keyConfig"></ejs-richtexteditor>
</template>

<script setup>
import { provide, onMounted, ref } from "vue";  
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';

const defaultRTE = ref(null);
const rteValue = `<p>The Syncfudion 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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>`;
const toolbarData = {
  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']
};
const keyConfig = {
  'bold': 'ctrl+alt+b',
  'italic': 'ctrl+alt+i',
  'underline': 'ctrl+alt+u',
};
onMounted(() => {
  document.addEventListener('keyup', onKeyUp);
});
const onKeyUp = (e) => {
  if (e.altKey && e.keyCode === 84) { /* t */
    // press alt+t to focus the component.
    defaultRTE.value.ej2Instances.focusIn();
  }
}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <ejs-richtexteditor ref="defaultRTE" :height="340" :value="rteValue" :toolbarSettings="toolbarData" :keyConfigs="keyConfig"></ejs-richtexteditor>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';

export default {
  name: "App",
  components: {
    "ejs-richtexteditor": RichTextEditorComponent
  },
  data() {
    return {
      toolbarData: {
        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: {
        'bold': 'ctrl+alt+b',
        'italic': 'ctrl+alt+i',
        'underline': 'ctrl+alt+u',
      },
      rteValue: `<p>The Syncfudion 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 &lt;IFRAME&gt; and &lt;DIV&gt; 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>`,
    }
  },
  mounted() {
    document.addEventListener('keyup', this.onKeyUp);
  },
  methods: {
    onKeyUp(e) {
      if (e.altKey && e.keyCode === 84) { /* t */
        // press alt+t to focus the component.
        this.$refs.defaultRTE.ej2Instances.focusIn();
      }
    }
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
  }
}
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>

See Also