Froala shortcuts and hints

by Froala_marketing

HTML

<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

<p>Type something and click CTR + H to turn it into H1 </p>
<div id="editor"></div>

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

JavaScript

FroalaEditor.RegisterShortcut(
  72, // Decimal code for 'H' key
  'paragraphFormat', // Command
  'H1', // Selected Action
  'H',
  false, // No Shift
  false, // No Alt or Option
)

const editor = new FroalaEditor(
  '#editor',
  {
    shortcutsHint: true, //display the shortcut code on hover over the button
    //shortcutsEnabled: []
  },
  function () {
    //Display shortcut on Help modal
    this.opts.helpSets.push({
      title: 'Paragraph Format',
      commands: [{ val: 'OSkeyH', desc: 'Heading 1' }],
    })
  },
)