Contenteditable div：當位於空的新行時保存和恢復插入位置

Question

我需要保存並恢復插入符號位置，因為用戶鍵入了一個可信的div（編寫的html被編輯並在按下每個鍵時重新插入）。

我已閱讀並成功使用Tim Down的解決方案來解決類似的問題： https ： //stackoverflow.com/a/13950376/2086428 。

當插入符號位於空行時會發生問題，它將恢復到之前的非空行（ 在此處嘗試，添加新行並保存/恢復光標）。

在解決方案的評論部分提出一個用戶有同樣的問題，解決方案的作者暗示將<br>轉換為字符。

我怎樣才能做到這一點？ 有沒有更簡單的解決方案？

PS：我不能在這個項目中使用rangy。

Answer 1

從這個答案 ：

解決方案是確保每個“br”標記后跟一個換行符（\\ n）。

這不會以任何可見的方式損害HTML內容，但是現在，只要調用range.toString（），所有HTML中斷都會轉換為純文本換行符。

<br>\n

這里的工作示例： http ： //jsfiddle.net/gEhjZ/95/

比較，例如，有問題（沒有\\ n在“br”之后）： http ： //jsfiddle.net/gEhjZ/94/

Answer 2

你可以聽keydown; 每按一次Enter鍵，檢查插入位置后是否有相同（或下一個兄弟）文本節點中的某些字符（您將在該行斷開之前收到事件）。 如果不在插入位置后添加，則保存位置。

其中一些實用程序可能很有用：

https://github.com/MailOnline/milo/blob/master/lib/util/dom.js https://github.com/MailOnline/milo/blob/master/lib/util/selection/index.js