有同学对这块内容比较感兴趣，接下来简单介绍一下实现原理。
在之前输入框内插入表情都是通过在textarea插入特殊标识，如[smile],后来在页面渲染时替换成<img src="smile.gif">。那么如何在插入时就能看到所发送的表情呢？类似QQ。
效果先行
a.png
1.gif
1.conteneditable属性
传统textarea文本域不能解析标签，例如：
textarea.value+="<img src='smile.gif'>"
//输入框内仍然是<img src='smile.gif'>，不能解析标签
自然就不能使用textarea作为文本载体了，我们可是使用 conteneditable属性，它可以让你的div也具备输入功能
<div contenteditable="true"></div>
好，div可以输入内容了，并且插入的标签也可以解析；如果只是想在段落末尾加上表情，那你大可以这样去做：
div. innerHTML+="<img src='smile.gif'>"
但是，你是要成为海贼王的男人，怎么能满足于此？
2.getSelection(获取selection对象)
为什么要用它？有时候我们想在光标所在位置插入标情，那这个对象里就有可以让我获取位置的方法及属性；
Selection对象所对应的是用户所选择的ranges（区域），俗称拖蓝。默认情况下，该函数只针对一个区域
在你的页面插入这段代码，当你点击的时候就会在页面弹出你所框选的内容了
document. onkeyup=function(){
var word = window.getSelection?window.getSelection():document.selection.createRange().text;
alert(word)
}
更细致的选取操作：
var sel = window.getSelection();
var range = sel.getRangeAt(0)//选择第一选区
var img = new Image();
range.collapse(false);//对于IE来说，参数不可省略
img.src="smile.gif"//创建图片节点
range.insertNode(node);//插入到该选区
这样去写的话会存在一些问题；当你框选内容的时候，不会替换内容，而是在所选内容之后插入，这是因为range.collapse()方法：
range.collapse();//（false 默认）到选区末端 true 开始位置
//当你框选内容的时候，执行该方法，可以让光标移动到选区结束位置，然后插入内容
所以，当框选的时候，正常做法应该是删除框选内容，然后插入新节点
range.deleteContents();//清除内容
优化上述代码：
var sel = window.getSelection();
var range = sel.getRangeAt(0)//选择第一选区
range.deleteContents();//清除选区内容
var img = new Image();
range.collapse(false);//对于IE来说，参数不可省略
img.src="smile.gif"//创建图片节点
range.insertNode(node);//插入到该选区
完整代码
function insertImg(src) {
if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var img = new Image();
range.deleteContents()
img.src=src;
range.insertNode(img);
range.collapse(false);//对于IE来说，参数不可省略
}
}
2.gif
IE怎么办？
function insertImg(src) {
if (window.getSelection) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var img = new Image();
range.deleteContents()
img.src=src;
range.insertNode(img);
range.collapse(false);//对于IE来说，参数不可省略
}else if ('selection' in document) {
content.focus();
var range = document.selection.createRange();
range.pasteHTML('<img src="' + src + '"> ');//插入文本，则range.text="xxx"即可
content.focus();//IE 11模拟的IE5~IE8无须这一步也能获得焦点
}
}
//content为我的输入框id
表情包去哪找？如果碰到这个问题，这篇文章就不要看了
4.gif
人生异常短暂
