Question

我已经在论坛上对此进行了很好的搜索，无法找到具体的答案。

我有一个内容可编辑的div，我在顶部有3个按钮（粗体，斜体，下划线），它们将execCommand应用于div中突出显示的文本。

我还有一些点击事件来监视在div中被点击的内容，以突出显示顶部相关按钮的效果很好（忽略无效的xhtml并与理论一致）：

$("[contenteditable]").delegate("u", "click", function (evt) {
    $("[command='underline']").addClass('on');
});

如果您碰巧在div中点击了一些带下划线的文本，则下划线命令按钮的样式为“on”。

我的问题是我现在需要创建一个类似的代码来监视carret在哪里做与上面相同的工作而不是点击，（如果用户使用箭头键移动div），可以使用这段代码调用它：

$("[contenteditable]").bind("keypress",function(e){
      //something about where the caret is and whats around it here
});

但那就是我卡住的地方，我不知道如何获取父标签或任何其他标签以了解carret可能在里面的内容以突出显示顶部的相关按钮。

（我的想法是，如果有一个问题的解决方案，我可以抛弃deligate点击功能，因为新的carret位置功能无论如何都会工作）

非常感谢人们可以给予的任何帮助，已经坚持了3天。

==

多么头疼!!!但我解决了!!!!!!

$('[contenteditable]').keydown(function() {
    thiselement = window.getSelection().anchorNode.parentNode;
    $(thiselement).trigger('click');
});

这将触发我之前提到的相关标签的正确点击功能！

Answer 1

浏览器不是手动执行所有操作，而是使用方法告诉您当前选择或插入符号是粗体，斜体还是其他：document.queryCommandState()（MSDN），用于二进制命令，例如粗体和斜体，document.queryCommandValue()（MSDN）用于带有值的命令，例如与字体相关的命令。

这仍然会让您在检测何时需要更新按钮时遇到问题。如果您的数量相对较少，那么只要keyup或mouseup事件触发，您就可以逃脱，但这不会捕获所有内容（从编辑或上下文菜单中剪切/复制/粘贴），例如，拖放文本）。您可以轮询选择和内容，以查看自上次检查后是否有任何更改，如果有更改，则更新按钮。

contenteditable / jquery - 获取插入位置并找出其内部的元素

1 个答案: