例子
這個頁面就是個例子。點擊一個段落，編輯，然后點Ready。你的修改就會呈現(xiàn)。

問題
遇到的第一個問題是：我想用文本框作為編輯區(qū)域。一開始我卻把內容放不進文本框去。讀者發(fā)現(xiàn)Mozilla的一個警告說是只有在文本框放置到文檔之后才能設置它的value。
另外，在Mozilla下面內容包裝的不是很好。我試了好幾種wrap參數(shù)，但是結果都不是很好。
最嚴重的問題就是把修改后的內容發(fā)回服務器，這是幾乎所有的CMS系統(tǒng)都要做的。讀者給了我很多高明巧妙的建議。然而因為不能通過JavaScript完成，所以我也不能提供解決辦法。所以也請您不要發(fā)郵件告訴你找到了辦法：那也許可行，但是我只想要純JavaScript的不需要服務器端代碼的方法。

腳本

解釋
我們設置一個editing標志為false。這用來顯示用戶是否正在編輯段落。當然初始是沒有。

var editing=false;

創(chuàng)建一個按鈕
然后我們創(chuàng)建一個Radey按鈕，后面會需要很多次。這需要一些高級腳本技術，所以先做一些對象檢測：


如果是現(xiàn)代瀏覽器，則創(chuàng)建按鈕：


他的文本是：


把這個文本添加到按鈕上：


然后添加一個onclick事件處理程序：


現(xiàn)在按鈕就存儲在butt里面，需要的時候我們就可以直接引用。

將P轉為文本框
稍后我們會為整個頁面定義一個onclick事件。所有的這些事件都會發(fā)送到catchIt()函數(shù)。





首先檢測用戶是否正常編輯段落，如果是，結束函數(shù)：


然后是支持性檢測：


然后尋找事件的源：


現(xiàn)在我們有了事件的源，但是有個問題是Mozilla會認為文本節(jié)點是源（而不是我們需要的P節(jié)點）。所以如果節(jié)點不是標簽（nodeType不是1），我們需要向上遍歷DOM樹：


現(xiàn)在我們以一個標簽結束。如果這是一個文本框的標簽那么用戶點擊之后就可以編輯了。如果是一個鏈接的標簽那么用戶點擊之后應該還是作為一個鏈接來反映的。這兩種情況下我們就不需要這個函數(shù)了：


我們需要再一次的向上遍歷DOM樹直到找到P標簽或者HTML標簽：


如果是HTML標簽那么表示用戶在段落之外點擊的，就結束函數(shù)：


經(jīng)過這個檢測我們最終確定用戶點擊的是我們想要編輯的段落。然后保存段落的innerHTML：


創(chuàng)建一個新的TEXTAREA然后保存：


然后找到段落的父節(jié)點：

現(xiàn)在就成了這樣：

            z
            |
  ---------------------------------------
  |    |      |      |   |
 [more] y(TEXTAREA) butt(BUTTON) P  [more]

然后刪除段落?，F(xiàn)在看起來就好像是文本框和按鈕代替了之前的段落。

直到現(xiàn)在，插入文本框之后，我們才能把段落的innerHTML放置在文本框內。Mozilla里面不支持在插入之前給文本框內添加內容。

	y.value = x;

為了用戶方便給文本框焦點：

	y.focus();

然后設置editing為true。

	editing = true;
}

將文本框轉換為P
當用戶點擊Ready按鈕，就應該反過來了。這個由saveEdit()函數(shù)來完成。
function saveEdit() {得到TEXTAREA（這里假設整個頁面只有一個TEXTAREA）：
    var area = document.getElementsByTagName('TEXTAREA')[0]創(chuàng)建一個新的段落并保存：

找到文本框的父元素：新的段落需要添加到那去：

將文本框的值存儲在新的段落里：

然后把新的段落插入在文本框之前：

移除文本框：

移除Ready按鈕（同樣的，假設頁面只有一個按鈕）：

然后設置editing為false：用戶停止編輯：

事件
在函數(shù)之外，設置一個整個頁面的onclick事件：

翻譯地址：http://www.quirksmode.org/dom/cms.html
轉載請保留以下信息
作者：北玉(tw:@rehawk)

最新評論