我如何运行查询某个 div（而不是整个页面）的 queryCommandState？

Question

我如何检测一个项目是否 bold，仅在我的 contenteditable div 中，而不是当用户点击整个页面上的其他任何地方？

我正在尝试运行 document.queryCommandState("bold") 但仅针对我的 contenteditable="true"div.

我用谷歌搜索了一段时间，但找不到任何东西。我已经尝试 replacing/adding 我的 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)

Answer 1

您可以先检查 contenteditable 是否正在集中注意力，然后再进行任何操作。

var editable = $("[contenteditable]")

setInterval(function () {
    if (!editable.is(":focus")) return

    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)

这里也不需要setInterval。例如，您可以绑定 click 事件。

我如何运行查询某个 div（而不是整个页面）的 queryCommandState？

How do I run queryCommandState for a certain div (and not the whole page)?

javascript

jquery

wysiwyg

contenteditable

rich-text-editor

我如何 运行 查询某个 div（而不是整个页面）的 queryCommandState？

How do I run queryCommandState for a certain div (and not the whole page)?

javascript

jquery

wysiwyg

contenteditable

rich-text-editor

我如何运行查询某个 div（而不是整个页面）的 queryCommandState？