select + range + insertNode+offset

self. cmd.range.selectNodeContents(p[0])   建立选区

self.cmd.select()   选中选区

self.cmd.selection([forceRest])  根据当前选中状态重置range对象，forceRest默认值为false，值为true时如果当前没有选中信息，自动选择文档(body编辑区域最后节点之后)的最后位置

insertNode是在当前选区之前插入的

理解这个range关键都在红色的分界线

up 提高一个range

<p>
        <strong id="nstrong"><span>123</span>abc</strong>def

    </p>

        
var range = mainbody_editor.cmd.range;
      var len = doc.getElementById("nstrong").childNodes;  [span, text]

     var up = range.up();

offset就是从初始位置到分界线有多少个节点

12|345|6

红色的竖线是分界线，startoffset 位置前头有2个节点所以是2，endoffset前头有5个节点所以是5

 <strong id="nstrong">|<span>123</span>|abc</strong>def

startoffset就是0  endoffset就是1

 

选区部分 startContainer text   startoffset 0   endContainer text   endffset 3

startContainer的startoffset在开始处，endContainer的endffset在结尾处

up之后  就是找到container的container

选区部分 startContainer span    startoffset 0   endContainer strong   startoffset 2

enlarge之后就是p，相当于找到公共的父节点

在文本节点内部 up enlarge是不变的,对于选区是元素节点是变化的

123

 

setStartAfter 是在一个节点的结束位置之后 比如 text | 这个时候偏移量是1，因为前面只有一个text节点

转载于:https://www.cnblogs.com/znsongshu/p/6079413.html