富文本編輯器 · JavaScript半知半解

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