javascript - 命令值的事件监听器

Question

我已经使用 contenteditable 构建了一个富文本编辑器，并且有一个按钮可以通过执行 document.execCommand("bold") 使文本变为粗体。当此命令处于事件状态时，我想以不同的方式设置按钮的样式(这意味着我写的下一个字符将变为粗体)。一个 hack 是过度检查 document.queryCommandValue("bold")，但我希望有更好的解决方案。

有什么方法可以监听 document.queryCommandValue("bold") 的值发生变化吗？

Answer 1

您可以检查插入符号位置的计算样式并相应地更新您的按钮:

// Get your contenteditable
var my_editor = document.getElementById("my_editor");

// Declare the function to update your buttons
function update() {
  // getting style at caret position
  var sel = window.getSelection();
  var style = sel.focusNode && window.getComputedStyle(sel.focusNode.parentElement);

  // guessing if text is bold
  var fW = style.fontWeight;
  var is_bold = fW && (parseInt(fW) > 400 || fW.indexOf("bold") == 0);

  // updating your buttons accordingly
}

// Bind the function to useful events
my_editor.addEventListener("input", update); // when content is modified
my_editor.addEventListener("click", update); // when caret is changed with the mouse
my_editor.addEventListener("keyup", update); // when caret is changed with the keyboard arrows