如何獲取contentEditable div的插入符號位置？

Question

我正在爲我的博客網站做一個文本編輯器。我想給用戶一個小工具箱，他們可以通過選擇文本並應用一些樣式來編輯他們的博客文章，例如使所選文本變爲粗體或斜體或給選定文本一些顏色。還有用於插入圖像和視頻鏈接的選項。

我搜索左右，但不能得到任何滿意的解決方案。

這將是巨大的，如果有人能幫助我找到插入位置的選擇（或不選擇）。我試過jQuery插頁插件，但它不工作。

我的代碼看起來像這樣（到達此閱讀職位上所以只）：

HTML：

<div id="editor" contentEditable="true"> 
    Initial text... 
</div> 

在一個單獨的JS文件：

(function(){ 
$("#editor").bind("keydown keypress mousemove", function() { 
     alert("Current position: " + $(this).caret().start); 
    }); 
}()); 

我得到在頁面加載時並沒有什麼發生在按鍵或任何事件的螢火以下錯誤：

它說

f.value未定義

我也試過this link

但這裏提供的解決方案，如果有原格內的任何其他標籤不會工作。

請幫助。另外，如果您有一些更好的解決方案或完全不同的方法，請指導我。

Answer 1

jQuery的插入符插件（我假定你的意思this one）僅用於文本輸入和文字區域。 Contenteditable元素的工作方式非常不同，所以這就是爲什麼它不起作用。

如果你想在字符偏移方面的插入位置或選擇，my answer here可能會有幫助，雖然一般來說，這聽起來像你正在試圖做的，這些數字不會有很大的幫助。這聽起來好像你需要看着document.execCommand()。