Tribute.js Integration

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>Froala WYSIWYG Editor can easily be integrated with the awesome <a href="https://github.com/zurb/tribute" target="_blank" rel="nofollow">Tribute.js library</a>. Type an @ to display the autocomplete list.
  </p>
</div>

CSS

<!-- Include Tribute.js style. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tribute.css">

JAVASCRIPT

<!-- Include Tribute.js javascript. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tribute.js"></script>
<script>
  $(function() {
    var tribute = new Tribute({
      values: [
                { key: 'Phil', value: 'pheartman' },
                { key: 'Gordon', value: 'gramsey' },
                { key: 'Jacob', value: 'jacob' },
                { key: 'Ethan', value: 'ethan' },
                { key: 'Emma', value: 'emma' },
                { key: 'Isabella', value: 'isabella' }
              ],
      selectTemplate: function(item) {
        return '<span class="fr-deletable fr-tribute">' + item.original.key + '</a></span>';
      }
    })

    $('#froala-editor')
      .on('froalaEditor.initialized', function(e, editor) {
        tribute.attach(editor.el)

        editor.events.on('keydown', function(e) {
          if (e.which == $.FroalaEditor.KEYCODE.ENTER && tribute.isActive) {
            return false;
          }
        }, true);
      })
      .froalaEditor()
  });
</script>