細分內容可編輯div的范圍

Question

因此，我正在使用（AWESOME）Rangy文本選擇包。 我正在使用contenteditable=true編輯span內的文本，目的是擁有一個文本輸入元素，該元素允許每個字符的樣式。 讓我強調最后一點-每個角色都應該在自己的跨度內 。 如果我不需要保留從一個擊鍵到下一個擊鍵的樣式，這會很好用-我只是做類似的事情

var newHTML = field.innerText.split('').map(function(c){
    return ('<span class="letter">'+c+'</span>');
}).join('');
$(field).empty().append(newHTML);

並使用Rangy（1.3）的saveCharacterRange()函數還原選擇，一切都很好。

當我已經設置了一些跨度的樣式時，就會出現問題，並且我刪除了一個跨度，並用新文本替換了。 我希望將新插入的文本取消樣式設置，但是將其插入到前面（或后面，如果選擇是在開頭）范圍。 我嘗試通過顯式折疊focusNode之后（或之前）的選擇區域來解決此問題，但似乎不允許endContainer （或startContainer ）用作文本節點以外的任何東西……我什至已驗證我可以創建一個文本范圍，該范圍在我想要的位置折疊，但是選擇對象的setSingleRange()似乎在文本節點周圍折疊。

我試着插入一個新的節點，並把選擇全在它里面，它不工作，當新節點調用之前，它的內容insertNode()但我顯然不能將每一個字符之間的額外內容...

這是一個小提琴，展示了我在說什么。 謝謝你的幫助！

Answer 1

我認為您犯了一個普遍的問題：瀏覽器（尤其是WebKit）對允許在文檔中選擇和插入符的位置有特定的想法。 這是我關於這個問題的最新答案：

https://stackoverflow.com/a/21591165/96100

Answer 2

也許有人可以對此進行擴展，但是我認為save/restoreCharacterRanges()是解決此問題的關鍵。 我已經在這種提琴中正常工作（假設您的選擇區域已折疊），盡管不是我想要的方式-這種方法（刪除剛剛添加的內容並移動到新的跨度）會導致keyup和keydown之間的閃爍。 我真的很想能夠將光標（在按下按鍵時）移到一個新的范圍內，這對用戶來說似乎是無縫的……

... 這是一個小提琴 ，可以選擇很長的內容，但不能粘貼...

更新

我已經切換到“插入<span>&#8024;</span>並將選擇區域移入其中”的方法，這種方法似乎效果很好，直到我開始嘗試使用其他瀏覽器。 每個瀏覽器的行為完全不同！ Chrome會在需要時將光標正確移動到“空白”范圍，但隨后會刪除重音符號； Firefox能夠很好地處理帶重音符號的字符，但在刪除跟隨新跨度的字符后無法移入新跨度； Safari會顯示重音符號， 然后移到新的跨度，而使重音符號變成孤立的...當刪除緊跟新字母的舊字母時，這三個都將顯示原始錯誤！ 同樣，當按下修飾鍵時，似乎不同的瀏覽器報告的鍵碼也不同。 這是一個迷失的原因嗎？ 我想念什么嗎？ 這是新代碼的擺弄 。