如何为特定的div（而不是整个页面）运行queryCommandState？

Question

如何检测某项是否为bold，仅在我的[[contenteditable div内，而不是当用户单击整个页面上的其他位置时才检测？

Here's my JSFiddle with the code.

我正在尝试运行

document.queryCommandState（“ bold”）] >>，但仅适用于我的contenteditable =“ true” div。

我已经搜索了一段时间，找不到任何东西。我试图以几种不同的方式将div选择器

$（“。text-editor”）

替换/添加到单词[[document中，但这是行不通的。我觉得我缺少明显的东西。谢谢！HTML：

---

<div contenteditable="true" class="text-editor">Content <b>editable</b>. Type here...</div>

<div class="normal-div">Content <b>not</b> editable.</div>

Click on the bold (and not bold) text in the two boxes. Result:
<div class="is-bold">The text your cursor's on is BOLD.</div>

<div class="is-not-bold">The text your cursor's on is NOT BOLD.</div>

<br>^^ I want this green result to only change when you're clicking inside the editable box.

CSS：

.text-editor {
  border: 2px solid red;
  margin-bottom: 10px;
}

.normal-div {
  border: 2px solid blue;
  margin-bottom: 10px;
}

.is-bold {
  display: none;
  color: green;
}

.is-not-bold {
  display: none;
  color: green;
}

.active {
  display: block;
}
jQuery：

setInterval(function () {
    var isItBold = document.queryCommandState("bold");
    if (isItBold == true) { 
    $(".is-bold").addClass("active");
    $(".is-not-bold").removeClass("active"); 
  }
  else { 
    $(".is-bold").removeClass("active");
    $(".is-not-bold").addClass("active"); 
  }
}, 100)

[如何检测一个项目是否为粗体，仅在我可编辑的div内，而不是当用户单击整个页面上的其他任何位置时，该项目是否为粗体？这是我的带有代码的JSFiddle。我正在尝试运行文档。...

Answer 1