contenteditable div退格鍵和刪除文本節點問題

Question

contenteditable div以及刪除可編輯div中的html和/或非內容可編輯內容有很多問題。

在此處使用出色的Tim Down的答案： 如何刪除具有contentEditable屬性的div中的HTML元素？

使用Tim的代碼，將刪除整個文本節點。 我需要像任何textarea一樣工作，逐字符刪除字符，只是確保html元素也可以退格。

我嘗試了以下

else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}

但這顯然不能正常工作。 如果我在內容結尾處，則說明一切正常。 但是，如果我將光標放在其他任何地方，它仍將從末尾刪除。

我現在迷路了，非常感謝您的幫助

http://jsfiddle.net/mstefanko/DvhGd/1/

Answer 1

在分解了Google如何在其Google加用戶標記中使用contenteditable div的方法之后，我找到了一個更合理的解決方案。 也許它將幫助其他人。

添加1個標記后，您已經可以看到html瀏覽器與瀏覽器之間的許多差異。

在Google Chrome瀏覽器中，每個標記都添加了一個空格。 使用了按鈕標簽。 並且使用僅Chrome的contenteditable =“ plaintext-only”。

當我在chrome中退格時，然后會附加一個BR標簽。

在Firefox中，BR標簽會立即與第一個標簽一起添加。 不需要空格。 並且使用輸入標簽代替按鈕標簽。

BR標簽是我在研究該標簽時獲得的最大突破。 在添加此代碼之前，刪除標簽和焦點問題存在很多古怪的行為。

在IE中，進行了更有趣的更改。 此處將具有contenteditable false的范圍用於標簽。 沒有空格或BR標簽，但文本節點為空。

有了這些，您不必完全復制Google。

重要部分：

如果要呈現HTML，請執行以下操作...

1. Chrome應該使用按鈕標記

2. Firefox / IE應該使用輸入標簽

對於范圍/選擇，您通常希望將諸如標簽之類的內容視為單個字符。 您可以將其內置到范圍/選擇邏輯中，但是輸入/按鈕標簽的行為更加一致，並且代碼更少。

IE在使用跨度的IE7-8中表現更好。 僅從UI的角度來看。 但是，如果您不在乎您的網站是否是IE的舊版本，則輸入以及Firefox和Firefox中的行為都是正確的。

3.僅適用於Chrome瀏覽器，請在可編輯div上使用contenteditable =“ plaintext-only”屬性。

否則，不僅在用戶嘗試粘貼富文本格式時，而且在刪除html元素時，有時還會將樣式轉移到div時，都會發生很多奇怪的問題，我注意到了許多奇怪的問題。

4.如果需要將插入符號位置設置為div的末尾，請將范圍的末尾設置為BR。

對於FireFox：

range.setEndBefore($(el).find('br')[0]);