Custom Quick Insert Button in Froala Editor V3

by froala

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<div id="froala-editor">
  <p>Hit enter at the end of this line to see the Quick Insert toolbar.</p>
</div>

JavaScript

// Define an icon.
FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star', SVG_KEY: 'star'})

// Define a button.
FroalaEditor.RegisterQuickInsertButton('myButton', {
  // Icon name.
  icon: 'buttonIcon',

  // Tooltip.
  title: 'My Button',

  // Callback for the button.
  callback: function () {
    // Call any editor method here.
    this.html.insert('Hello Froala!');
  },

  // Save changes to undo stack.
  undo: true
})

new FroalaEditor('div#froala-editor', {
  quickInsertButtons: ['image', 'table', 'ol', 'ul', 'myButton'],
  pluginsEnabled: ['quickInsert', 'image', 'table', 'lists']
})