首页 » KindEditor 编辑器 » KindEditor 4.x 文档
网站地图

Range API

K.range(mixed)¶

创建或选取KRange对象，KRange是原生Range的封装，包含大部分W3C Range接口，此外还有包含KRange和原生Range之间的转换功能。

  • 参数:
    • document|range mixed: document或原生range

  • 返回: KRange对象

示例:

  1. range = K.range(document);
  2. range = K.range(originalRange);

Note

DOM Level 2 Range Reference: http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

K.START_TO_START¶

调用 compareBoundaryPoints(how , range) 时使用。

K.START_TO_END¶

调用 compareBoundaryPoints(how , range) 时使用。

K.END_TO_END¶

调用 compareBoundaryPoints(how , range) 时使用。

K.END_TO_START¶

调用 compareBoundaryPoints(how , range) 时使用。

startContainer¶

range的开始节点。

startOffset¶

range的开始节点位置。

endContainer¶

range的结束节点。

endOffset¶

range的结束节点的位置。

collapsed¶

range的折叠状态，当range处于折叠状态时true，否则false。。

commonAncestor()¶

取得KRange的共同祖先。

  • 参数: 无
  • 返回: Element

示例:

  1. var range = K.range(document);
  2. var element = range.commonAncestor();

setStart(node , offset)¶

设置KRange的开始节点和位置。

  • 参数:
    • Node node: 任意节点
    • Int offset: 位置

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.setStart(document.body, 1);

setEnd(node , offset)¶

设置KRange的结束节点和位置。

  • 参数:
    • Node node: 任意节点
    • Int offset: 位置

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.setEnd(document.body, 2);

setStartBefore(node)¶

将Node的开始位置设置成Range的开始位置。

  • 参数:
    • Node node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.setStartBefore(K('div#id')[0]);

setStartAfter(node)¶

将Node的结束位置设置成Range的开始位置。

  • 参数:
    • Node node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.setStartAfter(K('div#id')[0]);

setEndBefore(node)¶

将Node的开始位置设置成Range的结束位置。

  • 参数:
    • Node node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.setEndBefore(K('div#id')[0]);

setEndAfter(node)¶

将Node的结束位置设置成Range的结束位置。

  • 参数:
    • Node node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.setEndAfter(K('div#id')[0]);

selectNode(node)¶

将Node的开始位置和结束位置分别设置成Range的开始位置和结束位置。

  • 参数:
    • Node node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNode(K('div#id')[0]);

selectNodeContents(node)¶

将Node的子节点的开始位置和结束位置分别设置成Range的开始位置和结束位置。对于文本节点和无结束符的元素，相当于使用selectNode。

  • 参数:
    • Node node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);

collapse(toStart)¶

折叠KRange，当toStart为true时向前折叠，false时向后折叠。

  • 参数:
    • Boolean toStart: 折叠方向

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);
  3. range.collapse(true);

compareBoundaryPoints(how , range)¶

根据how参数比较2个range的边界。

  • 参数:
    • Int how: 位置信息，可设置K.START_TO_START、K.START_TO_END、K.END_TO_END、K.END_TO_START。
    • Range range: 目标Range

  • 返回: 当this range在目标range的左侧时返回-1，在目标range的右侧时返回1，相同时返回0。

how参数的方向规则：

  • K.START_TO_START：比较目标range的开始位置和this range的开始位置。
  • K.START_TO_END：比较目标range的开始位置和this range的结束位置。
  • K.END_TO_END：比较目标range的结束位置和this range的结束位置。
  • K.END_TO_START：比较目标range的结束位置和this range的开始位置。

示例:

  1. var range1 = K.range(document);
  2. range1.selectNode(K('div#id')[0]);
  3. var range2 = K.range(document);
  4. range2.selectNode(K('div#id p')[0]);
  5. var cmp = range1.compareBoundaryPoints(K.START_TO_START, range2);

cloneRange()¶

复制KRange。

  • 参数: 无
  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);
  3. var newRange = range.cloneRange();

toString()¶

返回KRange的文本内容。

  • 参数: 无
  • 返回: String

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);
  3. var text = range.toString();

cloneContents()¶

复制并返回KRange的内容。

  • 参数: 无
  • 返回: documentFragment

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);
  3. var fragment = range.cloneContents();

deleteContents()¶

删除KRange的内容。

  • 参数: 无
  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);
  3. range.deleteContents();

extractContents()¶

删除并返回KRange的内容。

  • 参数: 无
  • 返回: documentFragment

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('div#id')[0]);
  3. var fragment = range.extractContents();

insertNode(node)¶

将指定Node插入到KRange的开始位置。

  • 参数:
    • Node node: 任意Node或documentFragment

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('#id1')[0]);
  3. range.insertNode(K('#id2')[0]);

surroundContents(node)¶

用指定Node围住KRange的内容。

  • 参数:
    • Element node: 任意节点

  • 返回: KRange

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('#id1')[0]);
  3. range.surroundContents(K('#id2')[0]);

isControl()¶

判断当前KRange是否可选择的Contral Range。

  • 参数: 无
  • 返回: Boolean

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('#id1')[0]);
  3. var bool = range.isControl();

get([hasControlRange])¶

将KRange转换成原生Range并返回。

  • 参数:
    • Boolean hasControlRange: 是否包含Contral Range

  • 返回: Range

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('#id1')[0]);
  3. var originalRange = range.get();

html()¶

返回KRange内容的HTML。

  • 参数: 无
  • 返回: HTML string

示例:

  1. var range = K.range(document);
  2. range.selectNodeContents(K('#id1')[0]);
  3. var html = range.html();

down()¶

降低range的位置。

  • 参数: 无
  • 返回: KRange

示例:

  1. // <p><strong><span>123</span>abc</strong>def</p>
  2. range.setStart(strong, 1);
  3. range.down();
  4. console.log(range.startContainer, range.startOffset); // print "abc", 0

up()¶

提高range的位置。

  • 参数: 无
  • 返回: KRange

示例:

  1. // <p><strong><span>123</span>abc</strong>def</p>
  2. range.setStart("abc", 0);
  3. range.up();
  4. console.log(range.startContainer, range.startOffset); // print strong, 1

enlarge()¶

扩大边界。

  • 参数: 无
  • 返回: KRange

示例:

  1. // <p><strong><span>123</span>abc</strong>def</p>
  2. range.setStart("123", 0);
  3. range.setEnd("abc", 3);
  4. range.enlarge();
  5. console.log(range.startContainer, range.startOffset); // print p, 0
  6. console.log(range.endContainer, range.endOffset); // print p, 1

shrink()¶

缩小边界。

  • 参数: 无
  • 返回: KRange

示例:

  1. // <p><strong><span>123</span>abc</strong></p>
  2. range.setStart(p, 0);
  3. range.setEnd(p, 1);
  4. range.shrink();
  5. console.log(range.startContainer, range.startOffset); // print "123", 0
  6. console.log(range.endContainer, range.endOffset); // print "abc", 3

createBookmark([serialize])¶

创建bookmark。(插入临时节点标记位置)

  • 参数:
    • Boolean serialize: bookmark类型，默认值为false，true时bookmark包含临时节点的ID，false时bookmark包含临时节点的Element。

  • 返回: bookmark

示例:

  1. bookmark = range.createBookmark();
  2. console.log(bookmark); // print {start: startNode, end: endNode}
  3.  
  4. bookmark = range.createBookmark(true);
  5. console.log(bookmark); // print {start: 'start_node_id', end: 'end_node_id'}

moveToBookmark(bookmark)¶

根据bookmark重新设置range。

  • 参数:
    • Object bookmark: 通过 createBookmark([serialize]) 得到的bookmark

  • 返回: KRange

示例:

  1. bookmark = range.createBookmark();
  2. // 在这里执行一些改变DOM的处理
  3. // ...
  4. range.moveToBookmark(bookmark);