Custom Dropdown in Froala Editor V3

by rcugut

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">

</div>

JavaScript

const LIQUID_TAGS = [
  '{{bidder.full_name}}',
  '{{bidder.first_name}}',
  '{{bidder.last_name}}',
  '{{bidder.email}}'
];

FroalaEditor.DefineIcon('liquidMarkupTagsIcon', {
  NAME: '{{TAGS}}',
  template: 'text'
})

FroalaEditor.RegisterCommand('liquidMarkupTags', {
  title: 'Template tags will be expanded',
  icon: 'liquidMarkupTagsIcon',
  type: 'dropdown',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  options: LIQUID_TAGS,
  callback: function(cmd, val) {
	  //console.log('cmd:', cmd, 'val:', val);
    this.html.insert(LIQUID_TAGS[val]);
    this.undo.saveStep();
  },
});

new FroalaEditor('div#froala-editor', {
  toolbarButtons: ['bold', 'italic', 'formatBlock', 'liquidMarkupTags']
})