在線的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);//獲取多個節點的HTMLfunction 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
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
