이모티콘을 채팅 텍스트 영역에 넣는 방법은 무엇입니까?

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>