如何開發HTML編輯器

作者: 盧春城來源: 博客園發布時間: 2010-03-23 14:51 閱讀: 1691 次推薦: 0 原文鏈接 [收藏]

在線的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對象，

2.4 修改選中的HTML的樣式

修改選中的HTML的樣式方法并不復雜，只需要將HTML轉成DOM對象，然后遞歸的設置每一個節點對應的樣式的值即可,具體代碼如下：

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與我聯系。

作者：盧春城
E-mail：mrlucc@126.com
WebIM：http://los.luchuncheng.cn/Chat.aspx?User=luchuncheng&Nickname=%u5362%u6625%u57CE
出處：http://lucc.cnblogs.com/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。

標簽：HTML