- 需求背景：利用div的contentEditable="true",可编辑区域，插入一些标签包含文本，非纯文本格式， vue 项目中我是使用v-html渲染，v-model无法达到我们的需求
可编辑的DIV(兼容IE8)
demo效果
js api
- document.activeElement 该属性属于HTML5中的一部分，它返回当前获得焦点的元素，如果不存在则返回“body”。
- selection对象 selection是对当前激活选中区（即高亮文本）进行操作。 在非IE浏览器（Firefox、Safari、Chrome、Opera）下可以使用window.getSelection()获得selection对象，本文讲述的是标准的selection操作方法。文中绝大部分内容来自
方法
- getRangeAt(index) 从当前selection对象中获得一个range对象。
- addRange(range) 将range添加到selection当中，所以一个selection中可以有多个range。 注意Chrome不允许同时存在多个range，它的处理方式和Firefox有些不同。
- removeRange(range) 从当前selection移除range对象，返回值undefined。 Chrome目前没有改函数，即便是在Firefox中如果用自己创建（document.createRange()）的range作为参数也会报错。 如果用oSelction.getRangeAt()取到的，则不会报错。
- removeAllRanges() 移除selection中所有的range对象，执行后anchorNode、focusNode被设置为null，不存在任何被选中的内容。