KindEditor/Range API

来自站长百科
跳转至： 导航、​ 搜索

KindEditor | 使用方法 | 初始化参数|添加自定义插件|API文档|常见问题

  • K.range(mixed)

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

参数:

  1. document|range mixed: document或原生range
  2. element root: DOM根元素，在root范围内选择DOM元素

返回: KRange对象

示例: 

range = K.range(document);
range = K.range(originalRange);
  • commonAncestor()

取得KRange的共同祖先。

参数: 无； 返回: Element

示例: 

var range = K.range(document);
var element = range.commonAncestor();
  • setStart(node , offset)

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

参数:

  1. Node node: 任意节点
  2. Int offset: 位置

返回: KRange

示例: 

var range = K.range(document);
range.setStart(document.body, 1);
  • setEnd(node , offset)

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

参数:

  1. Node node: 任意节点
  2. Int offset: 位置

返回: KRange

示例: 

var range = K.range(document);
range.setEnd(document.body, 2);
  • setStartBefore(node)

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

参数:

Node node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.setStartBefore(K('div#id')[0]);
  • setStartAfter(node)

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

参数:

Node node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.setStartAfter(K('div#id')[0]);
  • setEndBefore(node)

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

参数:

Node node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.setEndBefore(K('div#id')[0]);
  • setEndAfter(node)

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

参数:

Node node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.setEndAfter(K('div#id')[0]);
  • selectNode(node)

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

参数:

Node node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.selectNode(K('div#id')[0]);
  • selectNodeContents(node)

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

参数:

Node node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
  • collapse(toStart)

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

参数:

Boolean toStart: 折叠方向

返回: KRange

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
range.collapse(true);
  • compareBoundaryPoints(how , range)

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

参数:

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

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

how参数的方向规则：

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

示例: 

var range1 = K.range(document);
range1.selectNode(K('div#id')[0]);
var range2 = K.range(document);
range2.selectNode(K('div#id p')[0]);
var cmp = range1.compareBoundaryPoints(K.START_TO_START, range2.get());
  • cloneRange()

复制KRange。

参数: 无； 返回: KRange

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
var newRange = range.cloneRange();
  • toString()

返回KRange的文本内容。

参数: 无； 返回: String

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
var text = range.toString();
  • cloneContents()

复制并返回KRange的内容。

参数: 无； 返回: documentFragment

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
var fragment = range.cloneContents();
  • deleteContents()

删除KRange的内容。

参数: 无； 返回: KRange

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
range.deleteContents();
  • extractContents()

删除并返回KRange的内容。

参数: 无； 返回: documentFragment

示例: 

var range = K.range(document);
range.selectNodeContents(K('div#id')[0]);
var fragment = range.extractContents();
  • insertNode(node)

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

参数:

Node node: 任意Node或documentFragment

返回: KRange

示例: 

var range = K.range(document);
range.selectNodeContents(K('#id1')[0]);
range.insertNode(K('#id2')[0]);
  • surroundContents(node)

用指定Node围住KRange的内容。

参数:

Element node: 任意节点

返回: KRange

示例: 

var range = K.range(document);
range.selectNodeContents(K('#id1')[0]);
range.surroundContents(K('#id2')[0]);
  • isControl()

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

参数: 无； 返回: Boolean

示例: 

var range = K.range(document);
range.selectNodeContents(K('#id1')[0]);
var bool = range.isControl();
  • get([hasControlRange])

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

参数:

Boolean hasControlRange: 是否包含Contral Range

返回: Range

示例: 

var range = K.range(document);
range.selectNodeContents(K('#id1')[0]);
var originalRange = range.get();
  • html()

返回KRange内容的HTML。

参数: 无； 返回: HTML string

示例: 

var range = K.range(document);
range.selectNodeContents(K('#id1')[0]);
var html = range.html();
  • down()

降低range的位置。

参数: 无； 返回: KRange

示例: 

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

提高range的位置。

参数: 无； 返回: KRange

示例: 

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

扩大边界。

参数: 无； 返回: KRange

示例: 

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

缩小边界。

参数: 无； 返回: KRange

示例: 

// <p><strong><span>123</span>abc</strong></p>
range.setStart(p, 0);
range.setEnd(p, 1);
range.shrink();
console.log(range.startContainer, range.startOffset); // print "123", 0
console.log(range.endContainer, range.endOffset); // print "abc", 3
  • createBookmark([serialize])

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

参数:

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

返回: bookmark

示例: 

bookmark = range.createBookmark();
console.log(bookmark); // print {start: startNode, end: endNode}

bookmark = range.createBookmark(true);
console.log(bookmark); // print {start: 'start_node_id', end: 'end_node_id'}
  • moveToBookmark(bookmark)

根据bookmark重新设置range。

参数:

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

返回: KRange

示例: 

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

参考来源[ ]

KindEditor使用手册导航

使用方法

初始化参数

添加自定义插件

API文档：

基础API|事件API|选择器API|Node API|Range API|Command API|Ajax API|其它几种API

常见问题

取自“https://www.zzbaike.com/wiki/KindEditor/Range_API?oldid=102477”