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() 。