demo/index.html

<html>

  <head>
    <meta charset="utf-8">
    <link href="https://cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../dist/quill-emoji.css">
  </head>

  <body>
    <div class="container" style="position:relative;">
      <h2>Editor</h2>
      <div id="quill-editor" style="max-height: 300px;"></div>
    </div>

    <script src="https://cdn.quilljs.com/1.3.5/quill.js"></script>
    <script src="../dist/quill-emoji.js"></script>

    <script type="text/javascript">
      var toolbarOptions = {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'script': 'sub' }, { 'script': 'super' }],
          [{ 'indent': '-1' }, { 'indent': '+1' }],
          [{ 'direction': 'rtl' }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'font': [] }],
          [{ 'align': [] }],
          ['clean'],
          ['emoji'],
          ['link', 'image', 'video']
        ],
        handlers: {
          'emoji': function () {}
        }
      }

      var quill = new Quill('#quill-editor', {
        modules: {
          "toolbar": toolbarOptions,
          "emoji-toolbar": true,
          "emoji-shortname": true,
          "emoji-textarea": true
        },
        placeholder: 'Compose an epic...',
        theme: 'snow',
      });
    </script>
  </body>

</html>