在可編輯的div中可靠地獲取和設置光標/插入位置

Question

我正在構建一個簡單的在線文檔編輯器。 在此編輯器中，我希望將文本分成幾頁，每頁為一個可編輯的div。

我想出了一個基本的算法來做到這一點。 本質上，我檢查當前關注的div，以查看其單詞是否超過WORDS_PER_PAGE常量。 如果是這樣，則將本頁的最后一個單詞放在下一頁的開頭。 然后，在下一頁，下一頁等上執行相同的檢查，直到到達頁面末尾。 當按下的鍵是刪除/退格鍵時，將執行類似檢查。

現在這種算法並不完美（每個頁面的高度取決於單詞的長度），但是恰好適合我的需求。 真正困擾我的是設置光標位置並獲取這些可編輯div的光標位置。 我想要的只是一個函數getCursor (element) ，該函數將返回光標所偏移的字符數，而setCursor (element, n)將把光標設置為n個字符偏移量。

我不會胡扯IE <9，所以我不需要一個怪異的解決方法。 我也不能使用Rangy庫或其他任何庫。 我嘗試弄亂Range和Selection對象，但是什么也做不了。 有人對我應該如何解決此問題有任何想法或建議嗎？

Answer 1

<div id="example-one" contenteditable="true" onclick="alert(window.getSelection().getRangeAt(0).startOffset)">

圖片來源： http ： //www.sitepoint.com/forums/showthread.php？ 702589-set-caret-position-in-contenteditable- div