最近在做一个后台管理系统，要求可以对前台用户的作品进行评论，而评论要可以输入表情，常规的文字输入框都是用的文本域textarea来做的，但这种输入框只能输入文字，没有办法输入表情图标，这个时候可编辑div就能起到作用了，那么如何在可编辑的div中插入表情呢？
要完成这个功能得用到 selection 以及 range，selection 对象由 window.getSelection() 方法获得，它代表页面中的文本选区，选区对应的区域，而range对象，可由selection对象的 getRangeAt() 方法获得，实现在光标处插入图片后将光标移到图片后边，就是使用这两个对象中的方法。
基本的实现步骤是这样的，首先获得 selection 选区对象，再获得范围对象 range，创建图片节点，将图片节点插入到范围中，接着将范围收缩为它末端的一个点，最后将选区清除，将收缩后的范围重新添加到选区中即可，以下是核心的代码实现。
代码语言：javascript复制function insertImg(src) {
if ('getSelection' in window) {
var sel = window.getSelection();
// 有sel对象，并且用户已经点击过页面，且点击的选区起点和终点在同一位置
if (sel && sel.rangeCount === 1 && sel.isCollapsed) {
// 获取范围
var range = sel.getRangeAt(0);
var img = new Image();
img.src = src;
// 插入图片
range.insertNode(img);
// 将选区折叠为一个插入点，为了兼容IE添加一个参数
range.collapse(false);
// 移除选区
sel.removeAllRanges();
// 添加选区
sel.addRange(range);
}
} else if ('selection' in document) {
// content为可编辑div的ID
var div = document.getElementById('content');
// 获得焦点
div.focus();
// 创建范围对象
var range = document.selection.createRange();
// 插入图片
range.pasteHTML('<img src="' src '">');
// 如果要插入文本，请用range.text="XXXX"
div.focus();
}
}
