vue.js 댓 글 게시 정보 QQ 이모 티 콘 기능 삽입 가능

<template>
 <div id="publish">
  <!--        ，  Html5    contenteditable，        ，       IMG    -->
  <div class="publish_container">
    <p contenteditable="true" id="input_conta"></p>
  </div>

  <!--      -->
  <div class="face_container">
  <!--   Icon，      ，          -->
    <span @click=make_face() class="make_face"><i class="icon-emoji" ></i></span>
    <span class="make_img" @click="add_img()"><i class="icon-Pictuer"></i></span>
    <span class="send" @click=send()>  </span>
  <span class="send"><input type="checkbox" name="top" id="top" value="top">    </span>
    <!--      ，       ，        -->
    <div id="face" @click=choice_face($event)></div>
  </div>
 </div>

</template>

<script>

export default {
 data () {
  return {
   id:this.$route.query.id,
   top:"",
  }
 },
 methods:{
   make_face:function(){
     $("div#face").show();         //      
     if($("div#face>img").length==0){     //      ，           
       for(var i=1;i<=75;i++){      //              ，   75   
         $("div#face").append('<img src="/static/arclist/'+i+'.gif">'); //        IMG  ，   src ，           
       }
     }
   },//            
   choice_face:function(e){
     if(e.target.nodeName=="IMG"){
       var choice=e.target;
       var cEle = choice.cloneNode(true); //    ，             ，        IMG    ，        <p></p>  
       $("p#input_conta").append(cEle);
     }
   },
   //        
   send:function(){
   //     
   var text=$("#input_conta").html();  //          ，      img      
   console.log(text);
   $("#input_conta").html("");  //          
   $("div#face").hide();      //      //           
   var out_this=this;
     $("#addTextForm").ajaxSubmit({
     url: url+"/index/text/add",
     type: "post",
    data: {'i_text':text, 
      },
     success: function (data) {
       console.info(data);
     }
  });
   }
 },

}
</script>