如何將表情圖案放入聊天文字區域？

Question

我正在致力於即時通訊工具，並希望啓用「聊天者」以將emojis添加到他們的聊天中。這是我迄今爲止所擁有的。

<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>