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

Question

我在论坛上对此进行了很好的搜索，但找不到具体的答案。

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

我还有一些点击事件来监视 div 内点击的内容，以突出显示顶部的相关按钮，效果很好(忽略无效的 xhtml 并遵循理论):

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

如果您碰巧单击 div 中的某些带下划线的文本，则下划线命令按钮的样式将变为“on”。

我的问题是我现在需要创建一段类似的代码来监视插入符的位置，它执行与上面相同的工作而不是单击(如果用户使用箭头键在 div 周围移动)，这可以使用这段代码来调用:

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

但这就是我陷入困境的地方，我不知道如何获取父标签或任何其他标签，以突出显示顶部的相关按钮。

(我的想法是，如果这个问题有解决方案，我可以放弃精致的点击功能，因为新的插入位置功能无论如何都会起作用)

非常感谢人们能够提供的任何帮助，我们已经为此努力了 3 天。

======

好头疼!!!但我成功了!!!!!!

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

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

Answer 1

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

这仍然给您带来了检测何时需要更新按钮的问题。如果你的数量相对较少，那么每当 keyup 或 mouseup 事件触发时，你可能能够逃脱执行此操作，但这不会捕获所有内容(剪切/复制/例如，从编辑或上下文菜单粘贴、拖放文本)。您可以轮询选择和内容，看看自上次检查以来是否已更改，如果有更改则更新您的按钮。