contenteditable元素的光标控制，自制emoji插件

最近有个自定义表情插件要放入移动端页面，折腾了几天，有了些成果，分享下。

关键两点点就是contenteditable元素光标设置，和保持该元素的输入状态。

先上几个API吧

getSelection ，他表示一个选中的文档片段，就是鼠标拖拽后蓝底白字的部分。包含了锚点Anchor，焦点Focus，范围range等信息

Range 是核心，range对象包含了片段的起点、终点、长度、节点等信息，也提供了操作改片段的几个方法。可以由getSelection()..getRangeAt(0)获得，也可以自己创建createRange()。创建的选区自然是为了添加表情到光标位置（重要）。

range.insertNode(node) 向range对象起点添加节点，添加文本节点用insertNodeContent()——这个两种节点都能添。

range.collapse(boolean) 折叠选区，由于range添加节点内容后是选中状态（蓝底白字），需要折叠range来恢复输入状态，接收一个布尔值，true则向起点折叠，false向终点。其实光标的闪烁就是range的起点终点保持重合了（比较重要）。

selection.removeAllRanges() 和 selection.addRange(range) 分别是移除选区所有range 和添加新的range。这两个方法是为了保持selection的更新，否则你用getRangeAt(0)获取到的range都是之前的（比较重要）。

接下来是事件函数封装，看完整组件代码（不熟悉Vue的,JS里的this可以当成window，看注释吧）

注意：不要使用fastclick，IOS上触发不了blur事件，BUG。可自行用touch事件代替click，如果有好用的类似插件，还请留下链接，谢谢。