jquery.emoji.js

1、引用

<link rel="stylesheet" href="/static/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="/static/plug/jQuery-moji/src/css/jquery.emoji.css"/>
<script src="/static/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/jquery.mCustomScrollbar.js"></script>
<script src="/static/plug/jQuery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<script src="/static/plug/jQuery-emoji/src/js/jquery.emoji.js"></script>

2、html

<div class="windows_input" id="talkbox">
						<div class="input_icon">
							<a href="javascript:;"></a>
						</div>
						<div class="input_box">
							<textarea name="" rows="" cols="" id="input_box"></textarea>
							<p style="width: 204px;line-height: 50px;float: right;">Ctrl+Enter<button id="send">发送</button></p>
						</div>
					</div>

3、初始化

$("#talkbox #input_box").emoji({
					button: "#talkbox .input_icon a",
					showTab: false,
					animation: 'slide',
					icons: [{
						name: "QQ表情",
						path: "/static/plug/jQuery-emoji/dist/img/qq/",
						maxNum: 72,
						excludeNums: [41, 45, 54],
						file: ".gif",
						placeholder: "[qq_{alias}]"
					}]
				});

4、发送表情并将代码替换为表情图片

　

function send(){
	var text = document.getElementById('input_box');
	var chat = document.getElementById('chatbox');
	var btn = document.getElementById('send');
	var talk = document.getElementById('talkbox');
	btn.onclick=function(){
	　　　　　if(text.value ==''){
		　　alert('不能发送空消息');
		}else{
		　　text.value = replace_em(text.value);
		　　chat.innerHTML += '<li class="me"><p class="time">今天 18:26</p><img src="'+'https://tva4.sinaimg.cn/crop.0.0.1080.1080.50/005Sqdykjw8epvbgog754j30u00u0jtt.jpg?KID=imgbed,tva&Expires=1571046485&ssig=3tTYpfvSOI'+'" title="刘晴"><span>'+text.value+'</span></li>';
		　　text.value = '';
		　　chat.scrollTop=chat.scrollHeight;
		};
	};
	document.onkeyup = function(e){
		var e = e || event;
		if( e.keyCode == 13 && e.ctrlKey ){
			　if(text.value ==''){
			　　　　alert('不能发送空消息');
		　　　　　　}else{
			　　　　text.value = replace_em(text.value);
			　　　　chat.innerHTML += '<li class="me"><p class="time">今天 18:26</p><img src="'+'https://tva4.sinaimg.cn/crop.0.0.1080.1080.50/005Sqdykjw8epvbgog754j30u00u0jtt.jpg?KID=imgbed,tva&Expires=1571046485&ssig=3tTYpfvSOI'+'" title="刘晴"><span>'+text.value+'</span></li>';
			　　　　text.value = '';
			　　　　chat.scrollTop=chat.scrollHeight;
		　　　　　　};
	　　　　}
　　　　 }
　　　　//表情格式替换
　　　　function replace_em(str){
	　　str = str.replace(/\</g,'<');
	　　str = str.replace(/\>/g,'>');
	　　str = str.replace(/\n/g,'<br/>');
	　　str = str.replace(/\[qq_([0-9]*)\]/g,"<img src='/static/plug/jQuery-emoji/dist/img/qq/$1.gif' />");
	　　str = str.replace(/\[em_([0-9]*)\]/g,"<img src='/static/plug/jQuery-emoji/dist/img/tieba/$1.jpg' />");
	　　str = str.replace(/\[other_([0-9]*)\]/g,"<img src='/static/plug/jQuery-emoji/dist/img/tieba/$1.jpg' />");
	　　return str;
　　　　}
};
             
send();