javascript - 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 中有任何其他标签，此处提供的解决方案将不起作用。

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

score 1 · Accepted Answer

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

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

1 回答 1