Keyboard support in Vue Markdown Editor Component

18 Mar 202510 minutes to read

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

Toolbar

These shortcuts provide quick access to toolbar functions for managing menus and dialogs.

Actions	Windows	Mac
Focus on toolbar	Alt + F10	⌥ + F10
Close dropdowns/menu and dialogs	Esc	Esc

Content editing and formatting

These shortcuts help in efficiently editing and formatting text content.

Actions	Windows	Mac
Select all content	Ctrl + A	⌘ + A
Insert a hard line break (a new paragraph)	Enter	Enter
Make text bold	Ctrl + B	⌘ + B
Italicize text	Ctrl + I	⌘ + I
Apply strikethrough	Ctrl + Shift + S	⌘ + ⇧ + S

Inserting

These shortcuts allow for the quick insertion of tables, links, and images.

Actions	Windows	Mac
Open the insert table dialog	Ctrl + Shift + E	⌘ + ⇧ + E
Create link	Ctrl + K	⌘ + K
Open the insert image dialog	Ctrl + Shift + I	⌘ + ⇧ + I

Text manipulation

These shortcuts help in modifying text case and applying superscript or subscript.

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 + =	⌘ + =

Lists

These shortcuts enable the creation of ordered and unordered lists.

Actions	Windows	Mac
Create an ordered list	Ctrl + Shift + O	⌘ + ⇧ + O
Create an unordered list	Ctrl + Alt + O	⌘ + ⌥ + O

Clipboard operations

These shortcuts facilitate copying, cutting, and pasting content.

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

Undo & redo

These shortcuts allow for undoing and redoing recent changes.

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

Other actions

These shortcuts provide additional functionalities like fullscreen mode.

Actions	Windows	Mac
Toggle full screen mode	Ctrl + Shift + F	⌘ + ⇧ + F

Composition API (~/src/App.vue)

<template>
  <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData" :valueTemplate="valueTemplate" editorMode="Markdown">
  </ejs-richtexteditor>
</template>
<script setup>
import { provide, onMounted, ref } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
const defaultRTE = ref(null);
const toolbarData = {
  items: ['Bold', 'Italic', 'StrikeThrough', '|',
    'Formats', 'OrderedList', 'UnorderedList', '|',
    'CreateLink', 'Image', '|','Undo', 'Redo']
  };
const valueTemplate = `The sample is added to showcase **markdown editing**.

Type or edit the content and apply formatting to view markdown formatted content.

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`;
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, MarkdownEditor]);
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>

Options API (~/src/App.vue)

<template>
  <ejs-richtexteditor ref="defaultRTE" :height="340" :toolbarSettings="toolbarData" :valueTemplate="valueTemplate" editorMode="Markdown">
  </ejs-richtexteditor>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
export default {
name: "App",
components: {
"ejs-richtexteditor":RichTextEditorComponent
},
    data() {
      return {
        toolbarData: {
          items: ['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', '|','Undo', 'Redo']
        },
        valueTemplate: `The sample is added to showcase **markdown editing**.

  Type or edit the content and apply formatting to view markdown formatted content.

  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`
      }
    },
    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, MarkdownEditor]
    }
  }
</script>

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