效果圖：

css部分
<style type="text/css">
        *{margin:0;padding:0;}
        body{font-size:12px;font-family:"微軟雅黑";background:url("images/bg.jpg") no-repeat;background-size:cover;color:#666;}
        img{border:0;}
        ul li{list-style:none;}
        a{text-decoration:none;}
        .qq
 
{width:600px;height:200px;background:#fffcf4;border:1px solid #ebe3bc;margin:200px auto;position:relative;}
        .qq .q_title{font-size:14px;padding:10px 0 0 20px;}
        .qq .q_msg{width:538px;height:48px;border:1px solid #ebe3bc;margin:15px auto;background:#fff;font-size:14px;padding:10px;color:red;}
        /*文字框裡的表情有2px的間隔*/
 

        .qq .q_msg img{padding:2px;}
        .qq .q_face{float:left;margin-left:20px;}
        /*按鈕*/
        .qq .btn{width:80px;height:30px;border:0;background:orange;color:#fff;font-size:14px;font-family:"微軟雅黑";border-radius:3px;margin-left:455px;}
        /*表情區域父盒子*/
        .qq .q_allface{width:514px;height
 
:210px;border:1px solid #D0D0D0;position:absolute;top:160px;left:20px;background:#fff;box-shadow:0 0 10px #D7D7D7;box-shadow:1px 1px 8px red;
        display:none;
        }
        /*左邊盒子*/
        .qq .q_allface .f_ul{width:119px;height:210px;background:#f8f8f8;float:left;}
        .qq .q_allface ul li{line-height:30px;border-bottom:1px solid #fff;padding-left:10px;}
        /*右邊盒子*/
        .qq .q_allface .q_img{width:390px;height:210px;float:right;}
        /*表情列表*/
        .qq .q_allface .q_img ul li{float:left;margin:2px;cursor:pointer;}

        /*內容區父盒子*/
        .msg_box{margin:100px auto;}
        /*小盒子*/
        .msg_box .m_list{width:600px;height:120px;background:#fff;border-radius:3px;margin-top:20px;}
        /*頭像和個人資訊部分*/
        .msg_box .m_list .m_header{height:50px;}
        /*讓頭像變圓角*/
        .msg_box .m_list .m_header img{border-radius:50%;margin-top:5px;}
        /*a連結部分*/
        .msg_box .m_list .m_header a{display:block;line-height:50px;float:left;margin-left:20px;color:#666;font-size:14px;}
        .msg_box .m_list .m_header a:hover{color:red;opacity:.65;}
        /*發表的內容區域*/
        .msg_box .m_list .m_con{width:500px;height:40px;line-height:40px;color:#333;}
  </style>
   <link type="text/css" rel="stylesheet" href="css/animate.min.css">

html部分
<div class="qq">
        <p class="q_title">谷歌十年個人QQ:&nbsp;870162355</p>
        <!-- contentEditable="true" 讓div變成可編輯區域 不用textarea -->
        <div class="q_msg" contentEditable="true"></div>
        <a href="#" class="q_face">
            <img src="images/faces/2-121101200423.gif" width="24" height="24" alt="qq表情">
        </a>
        <button class="btn">發表</button>
        <div class="q_allface">
            <ul class="f_ul">
                <li>微博-表情</li>
                <li>陌陌-表情</li>
                <li>微信-表情</li>
                <li>qq-表情</li>
            </ul>
            <div class="q_img">
                <ul>
                    <li><img src="images/faces/2-121101200405.gif" ></li>
                    <li><img src="images/faces/2-121101200406.gif" ></li>
                    <li><img src="images/faces/2-121101200406-50.gif" ></li>
                    <li><img src="images/faces/2-121101200406-51.gif" ></li>
                    <li><img src="images/faces/2-121101200407.gif" ></li>
                    <li><img src="images/faces/2-121101200407-50.gif" ></li>
                    <li><img src="images/faces/2-121101200407-51.gif" ></li>
                    <li><img src="images/faces/2-121101200408.gif" ></li>
                    <li><img src="images/faces/2-121101200408-50.gif" ></li>
                    <li><img src="images/faces/2-121101200409.gif" ></li>
                    <li><img src="images/faces/2-121101200409-50.gif" ></li>
                    <li><img src="images/faces/2-121101200409-51.gif" ></li>
                    <li><img src="images/faces/2-121101200410.gif" ></li>
                    <li><img src="images/faces/2-121101200410-50.gif" ></li>
                    <li><img src="images/faces/2-121101200410-51.gif" ></li>
                    <li><img src="images/faces/2-121101200411.gif" ></li>
                    <li><img src="images/faces/2-121101200412-50.gif"></li>
                    <li><img src="images/faces/2-121101200412.gif"></li>
                    <li><img src="images/faces/2-121101200413.gif"></li>
                    <li><img src="images/faces/2-121101200413-50.gif"></li>
                    <li><img src="images/faces/2-121101200414.gif"></li>
                    <li><img src="images/faces/2-121101200414-50.gif"></li>
                    <li><img src="images/faces/2-121101200415.gif"></li>
                    <li><img src="images/faces/2-121101200415-50.gif"></li>
                    <li><img src="images/faces/2-121101200416.gif"></li>
                    <li><img src="images/faces/2-121101200416-50.gif"></li>
                    <li><img src="images/faces/2-121101200417.gif"></li>
                    <li><img src="images/faces/2-121101200418.gif"></li>
                    <li><img src="images/faces/2-121101200418-50.gif"></li>
                    <li><img src="images/faces/2-121101200419-50.gif"></li>
                    <li><img src="images/faces/2-121101200420.gif"></li>
                    <li><img src="images/faces/2-121101200421.gif"></li>
                    <li><img src="images/faces/2-121101200421-50.gif"></li>
                    <li><img src="images/faces/2-121101200424.gif"></li>
                    <li><img src="images/faces/2-121101200445.gif"></li>
                    <li><img src="images/faces/2-121101200449.gif"></li>
                    <li><img src="images/faces/2-121101200447.gif"></li>
                </ul>
            </div>
        </div>


        <!--發表內容列表區域-->
        <div class="msg_box">

        </div>


     </div>

jquery部分
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script type="text/javascript">
        $(".q_face").click(function(){
            $(".q_allface").toggle(400);
        });

        $(".q_img").find("li").click(function(){
            //點選的時候克隆一份給上面的文字框裡
            var img = $(this).find("img").clone();
            //利用append新增上去
            $(".q_msg").append(img);
        });

        //按鈕點選事件
        $(".btn").click(function(){
            //獲取輸入的內容
            var content = $(".q_msg").text();
            //如果內容為空 就獲取焦點
            if(content == ""){
                $(".q_msg").focus();
                return;
            }
            //ajax拼接
            var html = $("<div class='m_list animated bounceIn'>"+
                "<div class='m_header'>"+
                "<a href='#'><img src='../time/3.jpg' width='50' height='50' border='0' alt=''></a>"+
                "<a href='#'>文秀</a>"+
                "</div>"+
                "<div class='m_con'>"+
                ""+$(".q_msg").html()+""+
                "</div>"+
                "</div>");      
                $(".msg_box").prepend(html);
        });