如何開發HTML編輯器
線上的HTML內容編輯器為使用者提供文字的樣式控制，例如文字的顏色、字型大小等。雖然現在網上有不少功能強大的編輯器（如：FCKEditor），但是在使用中需要許多複雜的配置，而且程式碼往往比較“臃腫”。本文的目的就是介紹如何開發一個HTML編輯器。應用本文介紹的方法，可以方便的開發出滿足自己需求的，程式碼相對比較精簡的HTML編輯器。以下是一個應用本文方法開發的HTML編輯器，實現了一些簡單的功能：
開發方法如下：
1.新增一個可編輯的iframe
實現HTML編輯器的第1步就是在網頁中放置一個可編輯的iframe用來輸入文字，使iframe可編輯方法相當簡單，只需要將iframe的designMode設定為on即可，具體步驟如下：
var editor = document.getElementById("IFRAME的ID"); var editorDoc = editor.contentWindow.document; var editorWindow = editor.contentWindow; editorDoc.designMode = "on"; editorDoc.open(); editorDoc.write("<html><head></head><body style='margin:0px; padding: 0px;'></body></html>"); editorDoc.close();
2.設定選中文字的樣式
設定選中文字樣式的方法最簡單的方式就是使用document.execCommand,但是execCommand功能比較侷限，有時不能滿足需求，例如：execCommand設定字型大小隻能是1-7,不能使用畫素大小，而且如果你在點選工具欄按鈕到呼叫execCommand的過程中點選了其他的DIV，iframe的選中內容會消失，這時呼叫execCommand是無效的。因此本文介紹另一種方法，基本思路如下：
(1) 獲取選中的HTML；
(2) 修改HTML的樣式；
(3) 用修改後的HTML替換選中的HTML。
2.1 獲取選中的HTML
在不同的瀏覽器中獲取選中的HTML的方法是不同的，在IE中可以使用
var range = document.selection.createRange()
在Firefox,Chrome中則使用
var range = window.getSelection().getRangeAt(0);
2.2 替換選中的HTML
通過2.1的方法獲取了表示選中內容的物件後，就可以呼叫其方法來替換掉選中的內容。在不同的瀏覽器中替換選中的HTML的方法有所差異，在IE中可以只需呼叫range.pasteHTML就行了，在Firefox,Chrome中則使用range.deleteContents 和 range.insertNode 兩個方法來實現
2.3 封裝一個操作選中HTML的類
由於2.1中獲取的range物件的方法在不同瀏覽器中差異很大，因此，為了方便實現2.1和2.2提到的兩個操作，封裝了一個操作選中HTML的類SelectionRange，該類有兩個方法，GetSelectedHtml和Replace，分別用於獲取HTML和替換HTML。其程式碼如下：
//用於記錄瀏覽器的型別 var browser = {}; var ua = navigator.userAgent.toLowerCase(); browser.msie = (/msie ([\d.]+)/).test(ua); browser.firefox = (/firefox\/([\d.]+)/).test(ua); browser.chrome = (/chrome\/([\d.]+)/).test(ua); //獲取多個節點的HTML function GetInnerHTML(nodes) { var builder = []; for (var i = 0; i < nodes.length; i++) { if (nodes[i].nodeValue != undefined) { builder.push(nodes[i].innerHTML); } else { if (nodes[i].textContent) builder.push(nodes[i].textContent.replace(/\</ig, function() { return "<"; })); else if (nodes[i].nodeValue) builder.push(nodes[i].nodeValue.replace(/\</ig, function() { return "<"; })); } } return builder.join(""); } function SelectionRange(doc, range) { //獲取選中的內容的HTML this.GetSelectedHtml = function() { if (range == null) return ""; if (browser.msie) { if (range.htmlText != undefined) return range.htmlText; else return ""; } else if (browser.firefox || browser.chrome) { return GetInnerHTML(range.cloneContents().childNodes); } else { return ""; } } //用html替換選中的內容的HTML this.Replace = function(html) { if (range != null) { if (browser.msie) { if (range.pasteHTML != undefined) { //當前選中html可能以為某種原因（例如點選了另一個DIV）而丟失，重新選中 range.select(); range.pasteHTML(html); return true; } } else if (browser.firefox || browser.chrome) { if (range.deleteContents != undefined && range.insertNode != undefined) { //將文字html轉換成DOM物件 var temp = doc.createElement("DIV"); temp.innerHTML = html; var elems = []; for (var i = 0; i < temp.childNodes.length; i++) { elems.push(temp.childNodes[i]); } //刪除選中的節點 range.deleteContents(); //將html對應的節點(即temp的所有子節點)逐個插入到range中，並從temp中刪除 for (var i in elems) { temp.removeChild(elems[i]); range.insertNode(elems[i]); } return true; } } } return false; } }
與此同時，還實現了一個函式GetSelectionRange用於獲取當前選中文字對應的SelectionRange物件，
function GetSelectionRange(win) { var range = null; if (browser.msie) { range = win.document.selection.createRange(); if (range.parentElement().document != win.document) { range = null; } } else if (browser.firefox || browser.chrome) { var sel = win.getSelection(); if (sel.rangeCount > 0) range = sel.getRangeAt(0); else range = null; } return new SelectionRange(win.document, range); }
2.4 修改選中的HTML的樣式
修改選中的HTML的樣式方法並不複雜，只需要將HTML轉成DOM物件，然後遞迴的設定每一個節點對應的樣式的值即可,具體程式碼如下：
function SetNodeStyle(doc, node, name, value) { if (node.innerHTML == undefined) { return node; } else { node.style[name] = value; for (var i = 0; i < node.childNodes.length; i++) { var cn = node.childNodes[i]; if (node.innerHTML != undefined) { SetNodeStyle(doc, cn, name, value); } } return node; } } function SetStyle(doc, html, name, value) { var dom = doc.createElement("DIV"); dom.innerHTML = html; for (var i = 0; i < dom.childNodes.length; i++) { var node = dom.childNodes[i]; if (node.innerHTML == undefined) { //如果是文字節點，則轉換轉換成span var span = doc.createElement("SPAN"); span.style[name] = value; if (node.nodeValue != undefined) span.innerHTML = node.nodeValue.replace(/\</ig, function() { return "<"; }); else if (node.textContent != undefined) span.innetHTML = node.textContent.replace(/\</ig, function() { return "<"; }); //替換掉文字節點 dom.replaceChild(span, node); } else { SetNodeStyle(doc, node, name, value); } } return dom.innerHTML; }
2.5 示例
使用以上的程式碼，就可以相當方便的實現一個HTML編輯器，例如，以下程式碼實現將選中文字的字型大小設定為32px：
var range = GetSelectionRange(editorWindow); var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", "32px"); range.Replace(html);
同理，你可以實現設定行距，縮排，插入圖片等功能。
3.總結
本文給出的程式碼相容IE，Firefox和Chrome，如果有其它問題可以通過EMail或者WebIM與我聯絡。
轉自：https://www.cnblogs.com/gaoyoubo/archive/2010/05/31/1965057.html