效果先行
a.png
1.gif
1.conteneditable属性
传统textarea文本域不能解析标签，例如：
textarea.value+=""//输入框内仍然是，不能解析标签
自然就不能使用textarea作为文本载体了，我们可是使用conteneditable属性，它可以让你的div也具备输入功能
好，div可以输入内容了，并且插入的标签也可以解析；如果只是想在段落末尾加上表情，那你大可以这样去做：
div. innerHTML+=""
但是，你是要成为海贼王的男人，怎么能满足于此？
2.getSelection(获取selection对象)
为什么要用它？有时候我们想在光标所在位置插入标情，那这个对象里就有可以让我获取位置的方法及属性；
Selection对象所对应的是用户所选择的ranges（区域），俗称拖蓝。默认情况下，该函数只针对一个区域
在你的页面插入这段代码，当你点击的时候就会在页面弹出你所框选的内容了
document. onkeyup=function(){varword =window.getSelection?window.getSelection():document.selection.createRange().text; alert(word)}
更细致的选取操作：
varsel =window.getSelection();varrange = sel.getRangeAt(0)//选择第一选区varimg =newImage();range.collapse(false);//对于IE来说，参数不可省略img.src="smile.gif"//创建图片节点range.insertNode(node);//插入到该选区
这样去写的话会存在一些问题；当你框选内容的时候，不会替换内容，而是在所选内容之后插入，这是因为range.collapse()方法：
range.collapse();//（false默认）到选区末端true开始位置//当你框选内容的时候，执行该方法，可以让光标移动到选区结束位置，然后插入内容
所以，当框选的时候，正常做法应该是删除框选内容，然后插入新节点
range.deleteContents();//清除内容
优化上述代码：
varsel =window.getSelection();varrange = sel.getRangeAt(0)//选择第一选区range.deleteContents();//清除选区内容varimg =newImage();range.collapse(false);//对于IE来说，参数不可省略img.src="smile.gif"//创建图片节点range.insertNode(node);//插入到该选区
完整代码
functioninsertImg(src){if(window.getSelection) {varsel =window.getSelection();varrange = sel.getRangeAt(0);varimg =newImage(); range.deleteContents() img.src=src; range.insertNode(img); range.collapse(false);//对于IE来说，参数不可省略}}
2.gif
IE怎么办？
表情包去哪找？如果碰到这个问题，这篇文章就不要看了
4.gif
作者：vitor
链接：https://www.jianshu.com/p/e7478e27c1e4
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论