Tribute.js Integration

Try it yourself:

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>
  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>';
    }
  })

  new FroalaEditor('#froala-editor', {
    events: {
      initialized: function() {
        var editor = this;

        tribute.attach(editor.el)

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