在線的HTML內(nèi)容編輯器為用戶提供文本的樣式控制，例如文字的顏色、字體大小等。雖然現(xiàn)在網(wǎng)上有不少功能強大的編輯器
（如：FCKEditor），但是在使用中需要許多復(fù)雜的配置，而且代碼往往比較“臃腫”。本文的目的就是介紹如何開發(fā)一個HTML編輯器。應(yīng)用本文介紹
的方法，可以方便的開發(fā)出滿足自己需求的，代碼相對比較精簡的HTML編輯器。以下是一個應(yīng)用本文方法開發(fā)的HTML編輯器，實現(xiàn)了一些簡單的功能：
代碼下載 在線演示
開發(fā)方法如下：
1.添加一個可編輯的iframe
實現(xiàn)HTML編輯器的第1步就是在網(wǎng)頁中放置一個可編輯的iframe用來輸入文本，使iframe可編輯方法相當(dāng)簡單，只需要將iframe的
designMode設(shè)置為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.設(shè)置選中文本的樣式
設(shè)置選中文本樣式的方法最簡單的方式就是使用document.execCommand,但是execCommand功能比較局限，有時不能滿足需
求，例如：execCommand設(shè)置字體大小只能是1-7,不能使用像素大小，而且如果你在點擊工具欄按鈕到調(diào)用execCommand的過程中點擊了
其他的DIV，iframe的選中內(nèi)容會消失，這時調(diào)用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的方法獲取了表示選中內(nèi)容的對象后，就可以調(diào)用其方法來替換掉選中的內(nèi)容。在不同的瀏覽器中替換選中的HTML的方法有所差異，在IE中
可以只需調(diào)用range.pasteHTML就行了，在Firefox,Chrome中則使用range.deleteContents 和
range.insertNode 兩個方法來實現(xiàn)
2.3 封裝一個操作選中HTML的類
由于2.1中獲取的range對象的方法在不同瀏覽器中差異很大，因此，為了方便實現(xiàn)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);
//獲取多個節(jié)點的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)
{
//獲取選中的內(nèi)容的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替換選中的內(nèi)容的HTML
this.Replace = function(html)
{
if (range != null)
{
if (browser.msie)
{
if (range.pasteHTML != undefined)
{
//當(dāng)前選中html可能以為某種原因（例如點擊了另一個DIV）而丟失，重新選中
range.select();
range.pasteHTML(html);
return true;
}
}
else if (browser.firefox || browser.chrome)
{
if (range.deleteContents != undefined && range.insertNode != undefined)
{
//將文本html轉(zhuǎn)換成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]);
}
//刪除選中的節(jié)點
range.deleteContents();
//將html對應(yīng)的節(jié)點(即temp的所有子節(jié)點)逐個插入到range中，并從temp中刪除
for (var i in elems)
{
temp.removeChild(elems[i]);
range.insertNode(elems[i]);
}
return true;
}
}
}
return false;
}
}
與此同時，還實現(xiàn)了一個函數(shù)GetSelectionRange用于獲取當(dāng)前選中文本對應(yīng)的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的樣式方法并不復(fù)雜，只需要將HTML轉(zhuǎn)成DOM對象，然后遞歸的設(shè)置每一個節(jié)點對應(yīng)的樣式的值即可,具體代碼如下：
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)
{
//如果是文本節(jié)點，則轉(zhuǎn)換轉(zhuǎn)換成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 "<"; });
//替換掉文本節(jié)點
dom.replaceChild(span, node);
}
else
{
SetNodeStyle(doc, node, name, value);
}
}
return dom.innerHTML;
}
2.5 示例
使用以上的代碼，就可以相當(dāng)方便的實現(xiàn)一個HTML編輯器，例如，以下代碼實現(xiàn)將選中文本的字體大小設(shè)置為32px：
var range = GetSelectionRange(editorWindow);
var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", "32px");
range.Replace(html);
同理，你可以實現(xiàn)設(shè)置行距，縮進，插入圖片等功能。