## 富文本編輯器
**1、富文本編輯器簡介**
富文本編輯（WYSIWYG（What You See Is What You GET，所見即所得））。
最先的富文本編輯，就是在頁面中嵌入一個(gè)包含空HTML頁面的`iframe`，然后通過設(shè)置`designMode`屬性，這個(gè)空白的HTML頁面就可以編輯了，編輯對(duì)象則是該頁面`<body>`元素的HTML代碼。
designMode屬性有兩個(gè)可能的值：“off”和“on”，默認(rèn)為“off”。
給iframe指定一個(gè)非常簡單的HTML頁面作為編輯框：
```
<!DOCTYPE html>
<html>
<head>
<title>Edit</title>
</head>
<body></body>
</html>
```
要將其設(shè)置成可編輯，不是在iframe頁面內(nèi)，而是它嵌入的那個(gè)頁面，而且必須等待頁面完全加載后才能設(shè)置`designMode`屬性：
```
<iframe name="richedit" style="width:100px;height:100px" src="blank.html" ></iframe>
window.onload = function(){
window.frames['richedit'].document.designMode = 'on';
}
```
等到上面的代碼執(zhí)行完，就可以使用可編輯區(qū)了。
**1.1 使用contenteditable屬性**
可以給頁面中的任何元素添加`contenteditable`屬性，使其成為可編輯區(qū)：
```
<div id="richedit" contenteditable="true"></div>
```
當(dāng)然，也可以通過JavaScript設(shè)置：
```
var richedit = document.getElementById('richedit');
richedit.contentEditable = 'true';
```
**1.2 獲取編輯區(qū)里的HTML內(nèi)容**
```
// iframe
frames['richedit'].document.body.innerHTML
// 設(shè)置contenteditable的元素
richedit.innerHTML
```
**2 富文本選區(qū)**
在富文本編輯器中，使用框架（iframe）的`getSelection()`方法，可以確定實(shí)際選擇的文本，這個(gè)方法是window對(duì)象和document對(duì)象是屬性，調(diào)用它會(huì)返回一個(gè)表示當(dāng)前選擇文本的Selection對(duì)象。
每個(gè)`Selection`對(duì)象可能包含一個(gè)或多個(gè)`Range`對(duì)象。
`Range` 對(duì)象表示文檔的連續(xù)范圍區(qū)域，簡單的說就是高亮選區(qū)。一個(gè)Range的開始點(diǎn)和結(jié)束點(diǎn)位置任意，開始點(diǎn)和結(jié)束點(diǎn)也可以是一樣的（空Range）。最常見的就是用戶在瀏覽器窗口中用鼠標(biāo)拖動(dòng)選中的區(qū)域。
不過，不同的瀏覽器，`Range`對(duì)象是不一樣的，在Chrome、Mozilla、Safari等主流瀏覽器上，Range屬于`selection`對(duì)象（表示range范圍），而在IE下，Range屬于`TextRange`對(duì)象（表示文本范圍）。
在下面的所有列子中，皆以selection對(duì)象為主，同時(shí)會(huì)加上textRange對(duì)象的兼容代碼。
**2.1 拖動(dòng)選擇獲取**
每一個(gè)瀏覽器窗口都有一個(gè)selection（或text Range）對(duì)象，我們可以通過`window.getSelection()`方法來獲取：
```
var selectedRange;
function saveSelection(){
if(window.getSelection){
/*主流的瀏覽器，包括chrome、Mozilla、Safari*/
return window.getSelection();
}else if(document.selection){
/*IE下的處理*/
return document.selection.createRange();
}
return null;
};
```
注意：標(biāo)準(zhǔn)dom是從window中獲取selection對(duì)象，而ie是從document對(duì)象中獲取。
實(shí)例（可以試試在不同瀏覽器下的執(zhí)行，點(diǎn)擊里面的按鈕btn1）：Demo
**2.2 優(yōu)化獲取代碼**
一個(gè)selection對(duì)象有可能不是只有一個(gè)Range對(duì)象，有可能有多個(gè)，每一個(gè)Range對(duì)象代表用戶鼠標(biāo)所選取范圍內(nèi)的一段連續(xù)區(qū)域。（在Firefox中，可以通過 ctrl鍵可以選取多個(gè)連續(xù)的區(qū)域，因此在Firefox中一個(gè)selection對(duì)象有多個(gè)range對(duì)象，在其他瀏覽器中，用戶只能選取一段連續(xù)的區(qū) 域，因此只有一個(gè)range對(duì)象。）
如何獲取某個(gè)Range對(duì)象呢？我們可以通過selection對(duì)象的getRangeAt方法來獲?。?```
range = window.getSelection().getRangeAt(index)
```
`getRangeAt()`方法接受一個(gè)參數(shù)，代表該Range對(duì)象的序列號(hào)，也可以說你拖動(dòng)選擇的順序號(hào)，它的值有如下幾種情況：
- 當(dāng)用戶沒有按下鼠標(biāo)時(shí)候，該參數(shù)的值為0.
- 當(dāng)用戶按下鼠標(biāo)的時(shí)候，該參數(shù)值為1.
- 當(dāng)用戶使用鼠標(biāo)同時(shí)按住ctrl鍵時(shí)選取了一個(gè)或者多個(gè)區(qū)域時(shí)候，該參數(shù)值代表用戶選取區(qū)域的數(shù)量。
- 當(dāng)用戶取消區(qū)域的選取時(shí)，該屬性值為1，代表頁面上存在一個(gè)空的Range對(duì)象；
要獲取Range對(duì)象，一般我們會(huì)判斷是否有Range對(duì)象，我們可以通過selection對(duì)象的rangeCount屬性（類似數(shù)組的length，返回Range對(duì)象的數(shù)量）來判斷是否有多個(gè)Range對(duì)象，然后再去調(diào)用getRangeAt()方法。
對(duì)于富文本編輯器來說，一般情況下，我們只需要一個(gè)選擇區(qū)域（Range對(duì)象），優(yōu)化后的代碼如下：
```
function saveSelection(){
if(window.getSelection){
/*主流的瀏覽器，包括chrome、Mozilla、Safari*/
var sel = window.getSelection();
if(sel.rangeCount > 0){
return sel.getRangeAt(0);
}
}else if(document.selection){
/*IE下的處理*/
return document.selection.createRange();
}
return null;
};
```
實(shí)例（可以試試在不同瀏覽器下的執(zhí)行，點(diǎn)擊里面的按鈕btn2）：Demo
**2、Range對(duì)象的屬性和方法**
**2.1 創(chuàng)建Range對(duì)象（范圍）**
`document.createRange()`：用于創(chuàng)建一個(gè)Range對(duì)象（范圍）
**在IE下**：
`document.body.createTextRange()`：用于創(chuàng)建一個(gè)textRange對(duì)象
**2.2 Range對(duì)象的屬性**
```
endContainer：返回范圍的結(jié)束點(diǎn)的Document節(jié)點(diǎn)，通常是文本節(jié)點(diǎn)。
endOffset：返回endContainer中的結(jié)束點(diǎn)位置。
startContainer： 返回范圍的開始點(diǎn)中的Document節(jié)點(diǎn)，通常是文本節(jié)點(diǎn)。
startOffset：返回startContainer中的開始點(diǎn)位置。
collapsed：用于判斷范圍的開始點(diǎn)與結(jié)束點(diǎn)是否處于相同的位置，如果相同，該屬性值返回true，即范圍是空的或折疊的。
commonAncestorContainer：范圍的開始點(diǎn)和結(jié)束點(diǎn)的（即它們的祖先節(jié)點(diǎn)）、嵌套最深的 Document 節(jié)點(diǎn)。
```
注意：所有屬性都是只讀的。如果范圍中存在空格，也會(huì)計(jì)算在偏移量內(nèi)。
實(shí)例（點(diǎn)擊里面的按鈕btn3）：Demo
**2.3 Range對(duì)象的方法**
**2.3.1 范圍選擇**
```
selectNode(node)：設(shè)置該范圍的邊界點(diǎn)，使它包含指定節(jié)點(diǎn)和指定節(jié)點(diǎn)的所有子孫節(jié)點(diǎn)。
selectNodeContents(node)：設(shè)置該范圍的邊界點(diǎn)，使它包含指定節(jié)點(diǎn)的子孫節(jié)點(diǎn)，但不包含指定節(jié)點(diǎn)本身。
```
**2.3.2 操作范圍**
```
deleteContents()：將Range對(duì)象中所包含的內(nèi)容從頁面中刪除
setStart(node,index)：將指定節(jié)點(diǎn)中的某處位置指定為Range對(duì)象所代表區(qū)域的起點(diǎn)位置
setEnd(node,index)：將指定節(jié)點(diǎn)中的某處位置指定Range對(duì)象所代表區(qū)域的結(jié)束位置
setStartBefore(node)：將指定節(jié)點(diǎn)的起點(diǎn)位置指定為Range對(duì)象所代表區(qū)域的起點(diǎn)位置。
setStartAfter()：將指定節(jié)點(diǎn)的終點(diǎn)位置指定為Range對(duì)象所代表區(qū)域的起點(diǎn)位置。
setEndBefore()：將指定節(jié)點(diǎn)的起點(diǎn)位置指定為Range對(duì)象所代表區(qū)域的終點(diǎn)位置。
setEndAfter()： 將指定節(jié)點(diǎn)的終點(diǎn)位置指定為Range對(duì)象所代表區(qū)域的終點(diǎn)位置。
cloneRange()：對(duì)當(dāng)前的Range對(duì)象進(jìn)行復(fù)制，該方法返回一個(gè)復(fù)制的Range對(duì)象
cloneContents()：復(fù)制當(dāng)前Range對(duì)象所代表區(qū)域中的HTML代碼并返回新的DocumentFragment對(duì)象。
extractContents()：將Range對(duì)象所代表區(qū)域中的html代碼克隆到一個(gè)DocumentFragment對(duì)象中，然后從頁面中刪除這段HTML代碼
detach()：釋放Range對(duì)象。
insertNode(node)：將指定的節(jié)點(diǎn)插入到某個(gè)Range對(duì)象所代表的區(qū)域中，插入位置為Range對(duì)象所代表區(qū)域的起點(diǎn)位置，如果該節(jié)點(diǎn)已經(jīng)存在于頁面中，該節(jié)點(diǎn)將被移動(dòng)到Range對(duì)象代表的區(qū)域的起點(diǎn)處。
```
實(shí)例（關(guān)于setStart和setEnd，點(diǎn)擊里面的按鈕btn6）：Demo
實(shí)例（關(guān)于deleteContents，點(diǎn)擊里面的按鈕btn7）:Demo
實(shí)例（關(guān)于extractContents，點(diǎn)擊里面的按鈕btn8）:Demo
**2.3.3 其他方法**
```
collpase(boolean) 用于使范圍的邊界點(diǎn)重合。當(dāng)為true時(shí)，將范圍的結(jié)束點(diǎn)設(shè)為與開始點(diǎn)相同的值；當(dāng)為false時(shí)，將范圍的開始點(diǎn)設(shè)為與結(jié)束點(diǎn)相同的值。
compareBoundaryPoints(how,sourceRange)：用來比較兩個(gè)Range對(duì)象,返回1,0,-1（0表示相等，等于1時(shí)，當(dāng)前范圍在sourceRange之后，等于-1時(shí)，當(dāng)前范圍在sourceRange之前）
toString()：返回該范圍表示的文檔區(qū)域的純文本內(nèi)容。
```
**（1）compareBoundaryPoints()**
how的常量：
```
START_TO_START 用指定范圍的開始點(diǎn)與當(dāng)前范圍的開始點(diǎn)進(jìn)行比較。
START_TO_END 用指定范圍的開始點(diǎn)與當(dāng)前范圍的結(jié)束點(diǎn)進(jìn)行比較。
END_TO_END 用指定范圍的結(jié)束點(diǎn)與當(dāng)前范圍的結(jié)束點(diǎn)進(jìn)行比較。
END_TO_START 用指定范圍的結(jié)束點(diǎn)與當(dāng)前范圍的開始點(diǎn)進(jìn)行比較。
```
**4、selection對(duì)象**
selection對(duì)象可看作是Range對(duì)象的集合，包含一個(gè)或多個(gè)Range對(duì)象。
**4.1 屬性**
```
anchorNode：返回范圍的開始點(diǎn)的Document節(jié)點(diǎn)，和range對(duì)象的endContainer作用一樣。
anchorOffset：返回startContainer中的開始點(diǎn)位置，和range對(duì)象的startOffset作用一樣。
focusNode：返回范圍的結(jié)束點(diǎn)的Document節(jié)點(diǎn)，和range對(duì)象的endContainer作用一樣。
focusOffset：返回endContainer中的結(jié)束點(diǎn)位置，和range對(duì)象的endOffset作用一樣。
isCollapsed：范圍的開始點(diǎn)與結(jié)束點(diǎn)是否重疊
這是新標(biāo)準(zhǔn)中selection的屬性，通過這些屬性，我們省卻了先獲取range對(duì)象再獲取偏移量和節(jié)點(diǎn)的繁瑣。
```
實(shí)例（點(diǎn)擊里面的按鈕btn4）：Demo
**4.2 方法**
```
removeAllRanges()：刪除selection中原有的所有range
addRange(range)：將新的range添加到selection中
```
**5、HTMLInputElement的屬性方法**
**5.1 在IE下Range對(duì)象**
**（1）屬性
```
htmlText：返回字符串，為textRange的HTML內(nèi)容，與innerHTML作用一樣，只讀
text：返回字符串，為textRange的文本內(nèi)容，相當(dāng)于innerText，可讀寫。
```
**（2）方法**
```
moveStart("character",index)：選定范圍的開始點(diǎn)向后移動(dòng)index個(gè)字符
moveEnd("character",index)：選定范圍的結(jié)束點(diǎn)向后移動(dòng)index個(gè)字符
pasterHTML()：黏貼HTML到一個(gè)文本節(jié)點(diǎn)時(shí)，該文本節(jié)點(diǎn)自動(dòng)分隔。
```
**5.2 在其他主流瀏覽器上**
**（1）屬性**
```
selectionStart：獲取范圍的開始點(diǎn)，可讀寫
selectionEnd：獲取范圍的結(jié)束點(diǎn)，可讀寫
selectionDiraction
```
**（2） 方法**
```
select()：在焦點(diǎn)狀態(tài)下，移動(dòng)光標(biāo)至第一個(gè)字符后面
setSelectionRange(start,end)：設(shè)置范圍的開始點(diǎn)和結(jié)束點(diǎn)。
注意：selectionStart和selectionEnd會(huì)記錄元素最后一次selection的相關(guān)屬性，意思就是當(dāng)元素失去焦點(diǎn)后，使用selectionStart和selectionEnd仍能夠獲取到元素失去焦點(diǎn)時(shí)的值。
setSelectionRange(start,end)：
如果textbox沒有selection時(shí)，selectionStart和selectionEnd相等，都是焦點(diǎn)的位置。
在使用setSelectionRange()時(shí)
如果end小于start，會(huì)講selectionStart和selectionEnd都設(shè)置為end；
如果start和end參數(shù)大于textbox內(nèi)容的長度（textbox.value.length），start和end都會(huì)設(shè)置為value屬性的長度。
```
**3 操作富文本**
使用`document.execCommand()`方法是與富文本編輯器交互的重要方式，它可以對(duì)文檔執(zhí)行預(yù)定義的命令，而且可以應(yīng)用大多數(shù)格式。
語法：
```
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
```
參數(shù)說明：
- aCommandName：String類型，命令名稱
- aShowDefaultUI：Boolean類型，默認(rèn)為false，是否展示用戶界面，一般設(shè)為false。Mozilla沒有實(shí)現(xiàn)。
- aValueArgument：String類型，一些命令需要額外的參數(shù)值（比如insertHTML需要提供HTML內(nèi)容），默認(rèn)為null，一般不需要參數(shù)時(shí)都使用null。
命令介紹：
```
backColor (用法：document.execCommand('backColor',bfalseb,Color); )
改變文檔的背景顏色。 在styleWithCss模式，它影響的是包含元素的背景。 這個(gè)命令要求提供一個(gè)顏色值<color>作為第三個(gè)參數(shù) (Internet Explorer 使用這個(gè)命令設(shè)置文本背景色)
bold （用法: document.execCommand('Bold','false',null); ）
對(duì)選中文本或者插入元素設(shè)置、取消粗體顯示. (Internet Explorer 使用<strong>標(biāo)簽 而不是<b>標(biāo)簽。)
contentReadOnly
轉(zhuǎn)化文檔進(jìn)入只讀或者可編輯模式. 這個(gè)命令要求提供給一個(gè)boolean值給第3個(gè)參數(shù)(ie不支持)。
copy 用法：document.execCommand('copy','false',null);
把當(dāng)前選中區(qū)域復(fù)制到系統(tǒng)剪貼板。由于啟用這個(gè)功能的條件因?yàn)g覽器不同而不同，所以使用此功能時(shí)，請先檢查瀏覽器是否支持。
createLink
當(dāng)有選中區(qū)域的時(shí)候，將選中區(qū)域創(chuàng)建為一個(gè)錨點(diǎn)，需要提供一個(gè)URI給第3個(gè)參數(shù). 這個(gè)URI必須至少包含一個(gè)字符，空白字符也可。(Internet Explorer會(huì)創(chuàng)建一個(gè)URI為空的a標(biāo)簽)
cut 用法：document.execCommand('cut','false',null);
剪切選中文本到剪切板. 同copy一樣需要開啟剪切板功能。
decreaseFontSize
給選中文本或者插入元素添加一個(gè)small標(biāo)簽。(Internet Explorer不支持)
delete 刪除當(dāng)前選中區(qū)域
enableInlineTableEditing
開啟或禁用表的行和列的插入刪除功能 ( Internet Explorer不支持)
enableObjectResizing
開啟或禁用圖片或者其他可調(diào)整元素大小的（resize）功能 ( Internet Explorer不支持)
fontName 用法：document.execCommand('fontName','false',sFontName);
改變選中文本或者插入元素的字體。需要給第3個(gè)參數(shù)提供一個(gè)字體值（例如："Airal"）
fontSize 用法：document.execCommand('fontSize','false',sSize|iSize);
改變選中文本或者插入元素的字體大小。需要給第3個(gè)參數(shù)提供一個(gè)數(shù)字
foreColor
改變選中文本或者插入元素的字體顏色。需要給第3個(gè)參數(shù)提供一個(gè)顏色值
formatBlock
添加一個(gè)HTML塊式標(biāo)簽在包含當(dāng)前選擇的行，如果已經(jīng)存在了，更換包含該行的塊元素（在Firefox中的blockquote例外，它將包含任何包含塊元素）。需要提供一個(gè)標(biāo)簽名稱作為參數(shù)（比如：H1、P、DL、BLCOKQUOTE等）（IE僅支持標(biāo)題標(biāo)簽H1-H6，ADDRESS和PRE，使用時(shí)還必須包含標(biāo)簽分隔符<>，比如<H1>）
forwardDelete
刪除光標(biāo)所在位置的字符，和按下刪除鍵一樣。
heading
添加一個(gè)標(biāo)題標(biāo)簽在光標(biāo)處或所選文字上。需要提供標(biāo)簽名稱字符串作為參數(shù)（比如：H1、H6）（IE和Safari不支持）
hiliterColor
更改選擇或插入點(diǎn)的背景顏色。需要提供一個(gè)顏色值作為參數(shù)。（IE不支持）
increaseFontSize
在選擇或插入點(diǎn)周圍添加一個(gè)BIG標(biāo)簽（IE不支持）
indent
取消或縮進(jìn)選擇或插入點(diǎn)所在的行。
insertBrOnReturn
控制當(dāng)按下Enter鍵時(shí)，是插入br標(biāo)簽還是把當(dāng)前塊元素變成兩個(gè)（IE不支持）
insertHorizontalRule
在插入點(diǎn)插入一個(gè)水平線（刪除選中的部分）
insertHTML
在插入點(diǎn)插入一個(gè)HTML字符串（刪除選中部分）。需要提供一個(gè)HTML字符串作為參數(shù)（IE不支持）
insertImage
在插入點(diǎn)插入一張圖片（刪除選中部分）。需要提供一個(gè)image src URI作為參數(shù)。這個(gè)URI至少包含一個(gè)字符（空字符也行）。（IE會(huì)創(chuàng)建一個(gè)值為null的鏈接）
insertOrderedList
在插入點(diǎn)或選中文字上創(chuàng)建一個(gè)有序列表
insertUnorderedList
在插入點(diǎn)或選中文字上創(chuàng)建一個(gè)無序列表
insertParagraph
在選擇或當(dāng)前行周圍插入一個(gè)段落。（IE會(huì)在插入點(diǎn)插入一個(gè)段落并刪除選中部分）
insertText
在光標(biāo)插入位置插入文本內(nèi)容或覆蓋所選的文本內(nèi)容
italic
在光標(biāo)插入點(diǎn)開啟或關(guān)閉斜體字。（IE使用<em>標(biāo)簽，而不是<i>）
justifyCenter
對(duì)光標(biāo)插入位置或所選內(nèi)容進(jìn)行文字居中
justifyFull
對(duì)光標(biāo)插入位置或所選內(nèi)容進(jìn)行文本對(duì)齊（兩端對(duì)齊）
justifyLeft
對(duì)光標(biāo)插入位置或所選內(nèi)容進(jìn)行文本左對(duì)齊
justifyRight
對(duì)光標(biāo)插入位置或所選內(nèi)容進(jìn)行文本右對(duì)齊
outdent
對(duì)光標(biāo)插入行貨所選行內(nèi)容減少縮進(jìn)量
paste
在光標(biāo)位置黏貼剪貼板的內(nèi)容。（對(duì)選中內(nèi)容替換）
redo
重做被撤銷的操作
removeFormat
對(duì)所選內(nèi)容去除所有格式（比如：加粗）。
selectAll
選中編輯區(qū)里的全部內(nèi)容
strikeThrough
在光標(biāo)插入點(diǎn)開啟或關(guān)閉刪除線
subscript
在光標(biāo)插入點(diǎn)開啟或關(guān)閉下角標(biāo)
superscript
在光標(biāo)插入點(diǎn)開啟或關(guān)閉上角標(biāo)
underline
在光標(biāo)插入點(diǎn)開啟或關(guān)閉下劃線
undo
撤銷最近執(zhí)行的命令
unlink
去除所選的錨鏈接的<a>標(biāo)簽
useCSS
切換使用HTML tags還是CSS來生成標(biāo)記。需要一個(gè)布爾值作為參數(shù)。該屬性已廢除，使用styleWithCSS代替。
styleWithCSS
用這個(gè)取代useCSS命令。切換使用HTML tags還是CSS來生成標(biāo)記。需要一個(gè)布爾值作為參數(shù)。（false使用CSS，true使用HTML）
```
這個(gè)方法使用于iframe類型的編輯器，也適用于將`contenteditable`設(shè)置為true的元素：
```
// iframe
frames['richedit'].document.execCommand('bold', false, null);
// 設(shè)置contenteditable為true的元素
document.execCommand('bold', false, null);
```
**3.1 與命令相關(guān)的方法**
- queryCommandEnabled()：可以用它來檢測是否可以針對(duì)當(dāng)前選擇的文本，或者當(dāng)前插入字符所在位置執(zhí)行某個(gè)命令，它接受一個(gè)參數(shù)，即要檢測的命令，如果單親編輯區(qū)允許執(zhí)行傳入的命令，則返回true，否則返回false
```
document.queryCommandEnabled('bold') ){}
```
- queryCommandState()：用于確定是否已將指定命令應(yīng)用到了選擇的文本。比如：判斷當(dāng)前選擇的文本是否已將轉(zhuǎn)換成了粗體：
```
isBold = document.queryCommandState('bold');
```
- queryCommandValue()：用于取得執(zhí)行命名時(shí)傳入的值（即document.execCommand()的第三個(gè)參數(shù)）
**4、常用案例代碼**
**6.1 針對(duì)div（contenteditable="true"）相關(guān)操作**
**（1） 獲取用戶選擇內(nèi)容**
```
function saveSelection(){
if(window.getSelection){
/*主流的瀏覽器，包括chrome、Mozilla、Safari*/
var sel = window.getSelection();
if(sel.rangeCount > 0){
return sel.getRangeAt(0);
}
}else if(document.selection){
/*IE下的處理*/
return document.selection.createRange();
}
return null;
};
var selectedRange = saveSelection(); // 保存獲取到的Range對(duì)象
```
注意：如果是在IE下需要獲取內(nèi)容，需要使用selection.text來獲取。
實(shí)例（可以試試在不同瀏覽器下的執(zhí)行，點(diǎn)擊里面的按鈕btn2）：Demo
**（2） 恢復(fù)光標(biāo)位置**
```
function restoreSelection() {
var selection = window.getSelection();
if (selectedRange) {
try {
selection.removeAllRanges(); /*清空所有Range對(duì)象*/
} catch (ex) {
/*IE*/
document.body.createTextRange().select();
document.selection.empty();
};
/*恢復(fù)保存的范圍*/
selection.addRange(selectedRange);
}
}
```
實(shí)例（點(diǎn)擊里面的按鈕btn5）：Demo
**（3）將光標(biāo)移至文本最后**
```
function selectAllText(elem){
if(window.getSelection){
elem.focus();
var range = window.getSelection();
range.selectAllChildren(elem);
range.collapseToEnd();
}else if(document.selection){
var range = document.selection.createTextRange();
range.moveToElementText(elem);
range.collapse(false);
range.select(); /*避免產(chǎn)生空格*/
}
}
```
**6.2 表單元素（input、textarea）相關(guān)操作**
**（1） 將光標(biāo)置于表單元素的最后**
```
function toTextEnd(elem){
if(window.getSelection){
elem.setSelectionRange(elem.value.length,elem.value,length);
elem.focus()
}else if(document.selection){
/*IE下*/
var range = elem.createTextRange();
range.moveStart('character',elem.value.length);
range.collapse(true);
range.select();
}
}
```
實(shí)例（點(diǎn)擊里面的按鈕btn10）：Demo
**（2） 選中所有文字**
```
function selectAllText(elem){
if(window.getSelection){
elem.setSelectionRange(0,elem.value.length);
elem.focus();
}else if(document.selection){
var range = elem.createTextRange();
range.select();
}
}
```
實(shí)例（點(diǎn)擊里面的按鈕btn11）：Demo
**（3）獲取光標(biāo)位置**
```
function getCursorPosition(elem){
if(window.getSelection){
return elem.selectionStart;
}else if(document.selection){
elem.focus();
var range = document.selection.createTextRange();
range.moveStart('character',-elem.value.length);
return range.text.length;
}
return elem.value.length;
}
```
**（4）設(shè)置光標(biāo)位置**
```
function setCursorPosition(elem, position){
if(window.getSelection){
elem.focus();
elem.setSelectionRange(position,position);
}else if(document.selection){
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character',position);
range.moveStart('character',position);
range.select();
}
}
```
一個(gè)簡單的富文本編輯器：[富文本編輯器](https://github.com/IronPans/TGeditor)
- 前言
- JavaScript簡介
- 基本概念
- 語法
- 數(shù)據(jù)類型
- 運(yùn)算符
- 表達(dá)式
- 語句
- 對(duì)象
- 數(shù)組
- 函數(shù)
- 引用類型（對(duì)象）
- Object對(duì)象
- Array對(duì)象
- Date對(duì)象
- RegExp對(duì)象
- 基本包裝類型（Boolean、Number、String）
- 單體內(nèi)置對(duì)象（Global、Math）
- console對(duì)象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達(dá)式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應(yīng)用
- 客戶端存儲(chǔ)（Cookie、Storage、IndexedDB）
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測設(shè)備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 概述
- this關(guān)鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯(cuò)誤處理機(jī)制
- JavaScript開發(fā)技巧合集
- 編程風(fēng)格
- 垃圾回收機(jī)制