实现如上图所示的效果
首先下载jquery.qqFace.js与jquery-browser.js
需要修改表情包显示的位置可以在jquery.qqFace.js中修改var top = offset.top + $(this).outerHeight();
html中的textara改成<div class="text" style="background: #c0c0c0;height: 120px;" contenteditable="true" id="textarea"></div>
jquery.qqFace.js中修改insertAtCaret函数中else里面的值为textFeildValue = textFeildValue.replace(/\</g,'<');
textFeildValue = textFeildValue.replace(/\>/g,'>');
textFeildValue = textFeildValue.replace(/\n/g,'<br/>');
textFeildValue = textFeildValue.replace(/\[em_([0-9]*)\]/g,'<img src="static/arclist/$1.gif" border="0" />');
textObj.innerHTML+=textFeildValue;
最后在提交的时候修改replace_em函数为function replace_em(str){
/* str = str.replace(/\</g,'<');
str = str.replace(/\>/g,'>');
*/str = str.replace(/\n/g,'<br/>');
str = str.replace(/\[em_([0-9]*)\]/g,'<img src="static/arclist/$1.gif" border="0" />');
return str;
}
最后大功告成,不知道这样改会不会出现什么问题,但是目前使用良好。