富文字編輯器開發系列4 Range物件

2021-10-11 19:03:59 字數 4129 閱讀 8997

`textrange` 原生 `api`——`ie9`以下瀏覽器

range, 直譯為「範圍」,俗稱「拖藍」,顧名思義,就是瀏覽器中使用滑鼠拖拽選中的部分,通常會顯示為藍色背景,故稱「拖藍」。

但「拖藍」表示的並不是選中的文字內容,而是選中文字部分的html源**,它的開始節點和結束節點都是html元素物件。

還有一種特殊的拖藍,即閉合的拖藍,即它的開始節點和結束節點閉合到了一起(就是說它們是同乙個html元素),最終表現為游標所在位置的乙個點。

range屬於乙個selection(選區),通常,乙個選區內只有且只能選中乙個拖藍,但在firefox中,乙個選區會包含多個選區,所以,通常獲取拖藍都是使用selection.getrangeat(0)這樣的方式,表示獲取選區中的第乙個拖藍。

屬性或方法

說明collapsed唯讀屬性,拖藍是否閉合

commonancestorcontainer唯讀屬性,返回包含開始節點與結束節點的最深一級的節點(根節點)

endcontainer唯讀屬性,拖藍的結束節點

endoffset唯讀屬性,拖藍終點相對於結束節點開始位置的偏移量

startcontainer唯讀屬性, 拖藍的開始節點

startoffset唯讀屬性,拖藍起點相對於開始節點開始位置的偏移量

new range()構造乙個以全域性document為起點與終點的拖藍物件,即選中整篇文件

setstart(startnode, startoffset)設定拖藍的起點,startnode:開始節點,startoffset: 起點相對於開始節點開始位置的偏移量。

setend(endnode, endoffset)設定拖藍的終點,endnode:結束節點,endoffset: 終點相對於結束節點開始位置的偏移量。

setstartbefore(referencenode)相對於另乙個節點來設定拖藍的開始位置,該拖藍的開始節點與另乙個節點的父節點是同乙個,開始節點在另乙個節點之前

setstartafter(referencenode)相對於另乙個節點來設定拖藍的開始位置,該拖藍的開始節點與另乙個節點的父節點是同乙個,開始節點在另乙個節點之後

setendbefore(referencenode)相對於另乙個節點來設定拖藍的結束位置,該拖藍的結束節點與另乙個節點的父節點是同乙個,結束節點在另乙個節點之前

setendafter(referencenode)相對於另乙個節點來設定拖藍的結束位置,該拖藍的結束節點與另乙個節點的父節點是同乙個,結束節點在另乙個節點之後

seelctnode(referencenode)將拖藍設定為包含整個節點及其內容, 拖藍的起始和結束節點的父節點與傳入節點(referencenode)的父節點相同。

selectnodecontents(referencenode)設定拖藍,使其包含傳入節點的內容,拖藍的起始和結束節點的父節點即為傳入的節點。

collapse(tostart)閉合拖藍。tostart: 閉合方向,true向起點閉合,false向終點閉合。

clonecontents()返回包含拖藍中所有節點的文件片段

deletecontents()從文件中移除拖藍包含的內容

extractcontents()把拖藍的內容從文件樹移動到乙個文件片段中,返回該文件片段

insertnode(newnode)在拖藍的起始位置插入乙個新的節點,如果將新節點新增到乙個文字節點,則該文字節點在插入點處被拆分,插入發生在兩個文字節點之間;如果新節點是乙個文件片段,則插入文件片段的子節點。

surroundcontents(newparent)將拖藍的內容移動到乙個新的節點,並將新節點放到這個範圍的起始處。

compareboundarypoints(how, sourcerange)比較兩個拖藍的端點。how:指定如何比較,參見本表下方how部分。sourcerange: 要與之比較的拖藍,返回乙個數字,-1/0/1中的乙個,表示本拖藍的指定端點在源拖藍的指定端點前面,相同位置還是後面。

clonerange()返回乙個拖藍,並且該拖藍的範圍邊界點與被轉殖的拖藍物件相同。兩個拖藍的操作不會相互影響。

detach()將拖藍從使用狀態中釋放,用於改善效能

tostring()將拖藍的內容作為字串返回

how

指定如何比較,有四個可選值:

屬性或方法

說明boundingheight唯讀,返回繫結拖藍物件的矩形的高度

boundingleft唯讀,返回繫結拖藍物件矩形左邊緣和完全包含拖藍物件的左側之間的距離

boundingtop唯讀,返回繫結拖藍物件的矩形上邊緣和完全包含拖藍物件的頂邊之間的距離

boundingwidth唯讀,返回繫結拖藍物件的矩形的寬度

htmltext唯讀,獲取繫結拖藍物件的html內容

text唯讀,獲取或設定拖藍物件的純文字內容

collapse(tostart)閉合拖藍,tostart:閉合方向,向起點閉合還是向終點閉合

duplicate()複製乙份拖藍

execcommand()在當前拖藍上執行命令

expand()擴充套件拖藍,以便完全包含指定單位的範圍

findtext()搜尋原先拖藍內的指定文字,並調整拖藍使其包含第一次匹配的內容

inrange()返回當前拖藍是否包含指定拖藍

isequal()返回當前拖藍是否與指定拖藍相等

move()將拖藍摺疊,並將空白區域移動指定單位數。

moveend()將拖藍結束位置移動指定單位數

movestart()將拖藍的開始位置移動指定單位數

movetoelementtext()使拖藍包含指定元素的文字

parentelement()返回拖藍的父元素,也就是完全包含拖藍的最小元素

pastehtml()html內容貼上入給定的拖藍,並替換拖藍內任何先前的文字和html元素

querycommandenabled()返回表明指定命令是否可於給定文件當前狀態下使用execcommand命令成功事項的布林值。

querycommandstate()返回表明指定命令當前狀態的布林值

querycommandvalue()返回表明指定命令當前值的domstring

scrollintoview()將拖藍滾動到可視範圍內(頂部或底部)

select()將當前拖藍選中

setendpoint()根據其它拖藍的端點設定當前拖藍的結束點

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器,rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...