Question

我正在为我的博客网站制作一个文本编辑器。我想给用户一个小工具箱，他们可以通过选择文本和应用一些样式来编辑他们的博客文章，例如使所选文本变为粗体或斜体或给所选文本添加一些颜色。还可以选择插入图像和视频链接。

我搜索过但无法得到任何令人满意的解决方案。

如果有人能帮助我找到选择（或没有选择）的插入位置，那将是很棒的。我尝试了jQuery插入符号插件，但它不起作用。

我的代码看起来像这样（只在SO上读到这篇文章）：

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插入符插件（我假设你的意思是this one）仅用于文本输入和textareas。可满足的元素的工作方式非常不同，因此这就是它无法正常工作的原因。

如果您想要根据角色偏移进行插入位置或选择，my answer here可能会有所帮助，尽管通常情况下您会尝试这样做，但这些数字不会很有帮助。听起来好像你需要看document.execCommand()。