如何将表情符号放入聊天文本区？

Question

我正在开发一个即时通讯工具，并希望启用“聊天者”以将表情符号添加到他们的聊天中。这是我目前所拥有的。

<template name="chat_page">
    <h2>Type in the box below to send a message!</h2>
  <div class="row">
    <div class="col-md-12">
      <div class="well well-lg">
        {{#each messages}}
          {{> chat_message}}
        {{/each}}
      </div>
    </div>
  </div> 
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <form class="js-send-chat">  
        <div class="form-group">  
          <input class="form-control" id="input-emoticon" type="text" name="chat" placeholder="type a message here..." />
        </div>
        <button class="btn btn-primary btn-block">Send</button>
      </form>
    </div>
  </div>
</template>

Answer 1

<template name="emotis">
  {{{ parseEmoticons }}}
</template>

<template name="chat_page">
    <h2>Type in the box below to send a message!</h2>
  <div class="row">
    <div class="col-md-12">
      <div class="well well-lg">
        {{#each messages}}
          {{> chat_message}}
        {{/each}}
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <form class="js-send-chat">  
        <div class="form-group">  
          <input class="form-control" id="input-emoticon" type="text" name="chat" placeholder="type a message here..." />
        </div>
        <button class="btn btn-primary btn-block">Send</button>
      </form>
    </div>
  </div>
</template>

<template name="chat_message">
  <div class="row">
    <div class="col-md-12">
      <span class=avatar> <img src="/{{creatorAvatar sentBy}}" class="creatorImg"> </span>
      <span class="text">On {{timeStamp}} </span>
      <span class="bold">{{getUserById sentBy}} said: {{{parseEmoticons text}}} </span>
    </div>
  </div>
<br>
<br>
</template>