Question

我使用contenteditable构建了一个富文本编辑器，并有一个按钮，通过执行document.execCommand("bold")使文本变为粗体。当这个命令处于活动状态时，我想以不同的方式设置按钮的样式（意味着我写的下一个字符将是粗体）。黑客会过度检查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

命令值的事件侦听器

1 个答案: