Vue HtmlEditor - Keyboard Support

Users can use the following keys to interact with the UI component:

PC Mac Action
Ctrl + C ⌘ + C Copy
Ctrl + V ⌘ + V Paste
Ctrl + Z ⌘ + Z Undo
Ctrl + Y ⌘ + Y Redo
Ctrl + A ⌘ + A Select All
Ctrl + B ⌘ + B Bold
Ctrl + I ⌘ + I Italic
Enter Insert a line break (a new paragraph)
Shift + Enter Insert a line break (in the same paragraph)
Tab Nest current list item (when in a list)
Increase indentation (when at the start of a paragraph)
Move the cursor to the next table cell
Shift + Tab Move the cursor to the previous table cell
Decrease indentation (when at the start of a paragraph)
↑ → ↓ ← Navigate through the table
Enter Move the cursor outside the table (when in the last row)
Esc Close active dialog
Enter Apply active dialog data

Use the registerKeyHandler(key, handler) method to implement a custom handler for a key.

  • <template>
  • <DxHtmlEditor :ref="myHtmlEditorRef" />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxHtmlEditor from 'devextreme-vue/html-editor';
  •  
  • const myHtmlEditorRef = 'my-html-editor';
  •  
  • export default {
  • components: {
  • DxHtmlEditor
  • },
  • data() {
  • return {
  • myHtmlEditorRef
  • }
  • },
  • computed: {
  • htmlEditor: function() {
  • return this.$refs[myHtmlEditorRef].instance;
  • }
  • },
  • mounted: function() {
  • this.htmlEditor.registerKeyHandler('backspace', function(e) {
  • // The argument "e" contains information on the event
  • });
  • this.htmlEditor.registerKeyHandler('space', function(e) {
  • // ...
  • });
  • }
  • }
  • </script>
See Also