在平常的 textarea 中，只能显现平常的文本。假如简朴的输入文本，textarea 便足以胜任。然则实际状况每每要庞杂很多。
简朴版本的插进去脸色
罕见的版本平常都是运用 textarea，然后脸色运用某种商定的文本格式替代，比方“你好啊[笑容]”。在显现的时刻，经由过程牢固的文本剖析要领将内容中的脸色文本替换成图片。新浪微博中发微博的输入框就是云云。然则，在这有一点须要注重，假如只是简朴的在文本的末了插进去脸色之类的预定好的文本格式，只需猎取到到 textarea 的 value 然后做加法即可。
let editor = document.querySelect('#editor');
editor.value += '[笑容]';没你想的这么简朴
但实际状况却没有这么简朴，由于用户能够本身挑选光标的位置。当用户在某一段文本中心插进去光标以后，可不是简朴的加法了。在这类状况下，须要猎取到光标地点位置，在这个位置上插进去用来替代脸色的文本，然后将光标设置到脸色文本的背面。在这须要两个分外的要领：getCaretPosition和 setCaretPosition 。
getCaretPosition/setCaretPosition
浏览器并没有供应直接猎取光标位置的要领，须要我们变通的处置惩罚。浏览器基础上都支撑文本框的select()要领，这个要领用于选中文本框中一切的文本，然则只能乖乖的拿到返回的一切文本。HTML5 添加了两个属性：selectionStart 和 selectionEnd 协助我们越发顺遂地猎取挑选的文本。这两个属性中保留的是基于0的数值，示意所挑选的文本的局限，离别示意文本选区（选中的文本）开首和末端相对全部文本内容的偏移量（在全部文本内容中的位置）。比方：
let editor = document.querySelector('#editor');
// 从第一个字符最先，选中三个字符
editor.selectionStart = 0;
editor.selectionEnd = 1;
// 从第三个字符最先选中三个字符
editor.selectionStart = 2;
editor.selectionEnd = 5;
说到这你可能要问了，这个光标有啥关联啊？别急，听我慢漫说。既然上述两个设置差别数字能够挑选文本，那假如两个值设置成雷同的数字，会怎样呢？
// 从第三个字符最先选中零个字符
editor.selectionStart = 2;
editor.selectionEnd = 2;
出发点和尽头重合了！那末换个角度来形貌就是：当我们在猎取光标位置的时刻，实在就是选中的文本局限出发点和重点重合，相当于文本局限的出发点偏移量实在就是光标地点的位置偏移量，所以此时selectionStart的返回值就是我们须要的效果。
更症结的是，当 End 和 Start 设置成雷同值时，选区也是空的，出发点和重点充电，就好像是设置了光标的位置。实在有一个轻便的要领 setSelectionRange(start, end)，道理雷同。
当然有兴致你也能够尝尝 End小于 Start的状况。上述这些在当代浏览器和 IE9+ 上都支撑。
前端一直贫苦的照样浏览器的兼容问题。在低版本的 IE 中只能运用 document.selection 对象来模仿光标定位了。document.selection 只存在于 IE8 及更早的版本（能够运用 window.getSelection 替代），保留着用户在全部文档局限内挑选的文本信息，然则没法肯定用户挑选的是页面中哪一个部位的文本。要想获得挑选的文本，起首须要建立一个局限（Range，IE9+ 支撑 DOM Range API，然则 IE8及之前的版本不支撑，然则有相似的观点，text range。这是 IE 专有的特征）。可运用 document.selection.createTextRange 来建立我们所须要的 text range。然后应用moveStart().aspx)将文本的局限的出发点从当前位置（当前位置出发点和重点是重合的）移动到文本的开首，然后盘算选中文本的长度，这个长度值能够用来替代当前光标的位置。
let range = document.selection.createRange();
range.moveStart("character", editor.value.length);
cursurPosition = range.text.length;设置光标位置思绪相似，然则代码稍有差别：
let range = editor.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();总的来讲，在 textarea 中猎取和设置光标位置照样蛮简朴的。讲到这里了，我想插进去脸色应该是很轻松的一件事变了
猎取光标位置（文本局限前后堆叠） -> 修正文本局限（或许手动拼接） -> 从新设置光标位置 至此，脸色插进去功用的基础完成。
还没完毕
上述例子中，在输入框中脸色只能以文本的情势显现。假如想在输入框中显现输入的脸色，该怎么办呢？运用 contenteditable 属性为 true 的容器替代 textarea 是必需的，由于 textarea 中只能显现文本。然则这就充足了吗？不，明显不够。没有了 textarea 则认为这没有了 setSelectionRange, selectionStart 和 selectionEnd。然则幸亏道理也是相似，照旧运用 Range API 或许 Text Range(IE8及其更低版本)。详细的能够参考这篇：html元素contenteditable属性怎样定位光标和设置光标和这篇在可编辑的div中插进去图片。 详细实当代码我就不贴了，人人能够本身思索捋一捋。闻一知十，假如你真真正正地晓得怎样准确插进去图片，那末插进去庞杂的 DOM 构造对你来讲也是易如反掌。
