Summernote demo

Summernote demo

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
<h5>Words</h5>
<div id="summernote1"></div>
<h5>Emoji</h5>
<div id="summernote2"></div>
<h5>Mention</h5>
<div id="summernote3"></div>

JavaScript

$(document).ready(function() {
    $("#summernote1").summernote({
      height: 100,
      toolbar: false,
      placeholder: 'type with spring, summer, autumn, winter',
      hint: {
        words: ['spring', 'summer', 'autumn', 'winter'],
        match: /\b(\w{1,})$/,
        search: function (keyword, callback) {
          callback($.grep(this.words, function (item) {
            return item.indexOf(keyword) === 0;
          }));
        }
      }
    });

  $.ajax({
    url: 'https://api.github.com/emojis',
    async: false 
  }).then(function(data) {
    window.emojis = Object.keys(data);
    window.emojiUrls = data; 
  });;

  $("#summernote2").summernote({
    height: 100,
    toolbar: false,
    placeholder: 'type starting with : and any alphabet',
    hint: {
      match: /:([\-+\w]+)$/,
      search: function (keyword, callback) {
        callback($.grep(emojis, function (item) {
          return item.indexOf(keyword)  === 0;
        }));
      },
      template: function (item) {
        var content = emojiUrls[item];
        return '<img src="' + content + '" width="20" /> :' + item + ':';
      },
      content: function (item) {
        var url = emojiUrls[item];
        if (url) {
          return $('<img />').attr('src', url).css('width', 20)[0];
        }
        return '';
      }
    }
  });

	$("#summernote3").summernote({
    height: 100,
    toolbar: false,
    placeholder: 'type starting with @',
    hint: {
      mentions: ['Peter Paker', 'Tony Stark', 'Bruce Banner', 'Thor', 'Steve Roger'],
      match: /\B@(\w*)$/,
      search: function (keyword, callback) {
        callback($.grep(this.mentions, function (item) {
          return item.indexOf(keyword) == 0;
        }));
      },
      content: function (item) {
        return '@' + item;
      }    
    }
  });
});