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

Question

我正在為我的博客網站制作一個文本編輯器。 我想為用戶提供一個小工具箱，他們可以在其中通過選擇文本並應用一些樣式來編輯他們的博客文章，例如將所選文本設為粗體或斜體或為所選文本賦予某種顏色。 還有用於插入圖像和視頻鏈接的選項。

我搜索了 Stack Overflow，但沒有得到任何滿意的解決方案。

如果有人能幫我找到選擇（或不選擇）的插入符號位置，那就太好了。 我嘗試了 jQuery caret 插件，但它不起作用。

我的代碼看起來像這樣（僅在閱讀 Stack Overflow 上的一篇文章時才到達這里）：

HTML：

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

在單獨的 JS 文件中：

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

當頁面加載並且按鍵或任何事件沒有任何反應時，我在 Firebug 中收到以下錯誤：

它說：

f.value 未定義

我也試過這個鏈接

但是如果原始 div 中有任何其他標簽，則此處提供的解決方案將不起作用。

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

Answer 1

jQuery caret 插件（我假設您指的是這個插件）僅用於文本輸入和文本區域。 Contenteditable 元素的工作方式非常不同，所以這就是它不起作用的原因。

如果您想要字符偏移方面的插入符號位置或選擇，我在這里的回答可能會有所幫助，盡管通常對於您想要做的事情，這些數字不會很有幫助。 在我看來，您好像需要查看document.execCommand() 。