如何获得 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 未定义

我也试过this link

但如果原始 div 中有任何其他标签，此处提供的解决方案将不起作用。

请帮忙。另外，如果您有更好的解决方案或完全不同的方法，请指导我。

Answer 1

jQuery caret 插件（我假设您的意思是this one）仅适用于文本输入和文本区域。 Contenteditable 元素的工作方式非常不同，这就是它不起作用的原因。

如果您希望插入符号位置或选择字符偏移，my answer here 可能会有所帮助，尽管通常对于您正在尝试做的事情来说，这些数字不会很有帮助。在我看来，您似乎需要查看document.execCommand()。