KindEditor/Range API

• K.range(mixed)

創(chuàng)建或選取KRange對象，KRange是原生Range的封裝，包含大部分W3C Range接口，此外還有包含KRange和原生Range之間的轉(zhuǎn)換功能。

參數(shù):

1. document|range mixed: document或原生range
2. element root: DOM根元素，在root范圍內(nèi)選擇DOM元素

返回: KRange對象

示例:

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

• commonAncestor()

取得KRange的共同祖先。

參數(shù): 無； 返回: Element

示例:

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

• setStart(node , offset)

設(shè)置KRange的開始節(jié)點(diǎn)和位置。

參數(shù):

1. Node node: 任意節(jié)點(diǎn)
2. Int offset: 位置

返回: KRange

示例:

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

• setEnd(node , offset)

設(shè)置KRange的結(jié)束節(jié)點(diǎn)和位置。

參數(shù):

1. Node node: 任意節(jié)點(diǎn)
2. Int offset: 位置

返回: KRange

示例:

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

• setStartBefore(node)

將Node的開始位置設(shè)置成Range的開始位置。

參數(shù):

Node node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• setStartAfter(node)

將Node的結(jié)束位置設(shè)置成Range的開始位置。

參數(shù):

Node node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• setEndBefore(node)

將Node的開始位置設(shè)置成Range的結(jié)束位置。

參數(shù):

Node node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• setEndAfter(node)

將Node的結(jié)束位置設(shè)置成Range的結(jié)束位置。

參數(shù):

Node node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• selectNode(node)

將Node的開始位置和結(jié)束位置分別設(shè)置成Range的開始位置和結(jié)束位置。

參數(shù):

Node node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• selectNodeContents(node)

將Node的子節(jié)點(diǎn)的開始位置和結(jié)束位置分別設(shè)置成Range的開始位置和結(jié)束位置。對于文本節(jié)點(diǎn)和無結(jié)束符的元素，相當(dāng)于使用selectNode。

參數(shù):

Node node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• collapse(toStart)

折疊KRange，當(dāng)toStart為true時向前折疊，false時向后折疊。

參數(shù):

Boolean toStart: 折疊方向

返回: KRange

示例:

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

• compareBoundaryPoints(how , range)

根據(jù)how參數(shù)比較2個range的邊界。

參數(shù):

1. Int how: 位置信息，可設(shè)置K.START_TO_START、K.START_TO_END、K.END_TO_END、K.END_TO_START。
2. Range range: 目標(biāo)Range

返回: 當(dāng)this range在目標(biāo)range的左側(cè)時返回-1，在目標(biāo)range的右側(cè)時返回1，相同時返回0。

how參數(shù)的方向規(guī)則：

1. K.START_TO_START：比較目標(biāo)range的開始位置和this range的開始位置。
2. K.START_TO_END：比較目標(biāo)range的開始位置和this range的結(jié)束位置。
3. K.END_TO_END：比較目標(biāo)range的結(jié)束位置和this range的結(jié)束位置。
4. K.END_TO_START：比較目標(biāo)range的結(jié)束位置和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()

復(fù)制KRange。

參數(shù): 無； 返回: KRange

示例:

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

• toString()

返回KRange的文本內(nèi)容。

參數(shù): 無； 返回: String

示例:

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

• cloneContents()

復(fù)制并返回KRange的內(nèi)容。

參數(shù): 無； 返回: documentFragment

示例:

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

• deleteContents()

刪除KRange的內(nèi)容。

參數(shù): 無； 返回: KRange

示例:

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

• extractContents()

刪除并返回KRange的內(nèi)容。

參數(shù): 無； 返回: documentFragment

示例:

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

• insertNode(node)

將指定Node插入到KRange的開始位置。

參數(shù):

Node node: 任意Node或documentFragment

返回: KRange

示例:

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

• surroundContents(node)

用指定Node圍住KRange的內(nèi)容。

參數(shù):

Element node: 任意節(jié)點(diǎn)

返回: KRange

示例:

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

• isControl()

判斷當(dāng)前KRange是否可選擇的Contral Range。

參數(shù): 無； 返回: Boolean

示例:

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

• get([hasControlRange])

將KRange轉(zhuǎn)換成原生Range并返回。

參數(shù):

Boolean hasControlRange: 是否包含Contral Range

返回: Range

示例:

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

• html()

返回KRange內(nèi)容的HTML。

參數(shù): 無； 返回: HTML string

示例:

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

• down()

降低range的位置。

參數(shù): 無； 返回: 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的位置。

參數(shù): 無； 返回: 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()

擴(kuò)大邊界。

參數(shù): 無； 返回: 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()

縮小邊界。

參數(shù): 無； 返回: 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])

創(chuàng)建bookmark。(插入臨時節(jié)點(diǎn)標(biāo)記位置)

參數(shù):

Boolean serialize: bookmark類型，默認(rèn)值為false，true時bookmark包含臨時節(jié)點(diǎn)的ID，false時bookmark包含臨時節(jié)點(diǎn)的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)

根據(jù)bookmark重新設(shè)置range。

參數(shù):

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

返回: KRange

示例:

bookmark = range.createBookmark();
// 在這里執(zhí)行一些改變DOM的處理
// ...
range.moveToBookmark(bookmark);

參考來源

• http://www.kindsoft.net/doc.php

KindEditor使用手冊導(dǎo)航
使用方法 初始化參數(shù) 添加自定義插件 API文檔： 基礎(chǔ)API|事件API|選擇器API|Node API|Range API|Command API|Ajax API|其它幾種API 常見問題