在文本编辑器中更新按钮的状态答案

【问题标题】：Updating the state of a button in a text editor在文本编辑器中更新按钮的状态
【发布时间】：2011-11-15 19:29:18
【问题描述】：

我正在尝试为 ipad 开发应用程序，并且正在使用 contenteditable 功能。我创建了 3 个按钮（粗体、斜体、下划线），当有人点击它们时，他们使用 execCommand 执行功能。但是，当用户选择一个粗体字时，我想更改粗体图标图像的状态，以便让用户知道所选文本是粗体。此功能在 ckeditor 和 tinymce 等程序中可用，但我想知道它是如何完成的。我知道有些人使用每秒检查所有状态的计时器，但我认为这不是正确的方法。有人可以帮助我编写代码或解释如何做到这一点。

【问题讨论】：

这个问题可能需要重新标记，我认为这是 JavaScript/HTML，并且会得到更好的回应。我不会自己做，因为我不确定要添加的适当标签。
感谢jrturton的小费，我忘记了接受的事情，这次我一定会这样做的。

标签： javascript html ipad text editor

【解决方案1】：

查找 document.queryCommandState() 方法以找到您的答案

我相信你传递了一个返回真或假的标志，例如......

if(document.queryCommandState("Bold")){ highlightBoldBtn(); }

编辑

澄清一下，如果我理解正确，这将有效。这就是我和我的编辑们一起做的事情。只需将 'onclick' 和 'onkeyup' 事件添加到您的 contenteditable div 或 textarea 中，如下所示

// this array is for every button you implement on your editor
var buttonarr = ["Bold", "Italic", "Underline"] 

// here is the onclick/keyup function for your element
function updateButtons(){
  for(var i=0; i<buttonarr.length; i++){
    var buttontype = buttonarr[i];
    if(document.queryCommandState(buttontype)){
      // call function to turn this button "on" or use jQuery
      $('#btn_'+buttontype).addClass('button_on');   
    } 
  }
}

如果你注意到了，我所做的就是给我的每个按钮一个 ID 为“btn_”并附加按钮标志。然后我使用 CSS 制作了一个 button_on 类来相应地设置它的样式。您可能只想在每次调用 updateButtons() 时从所有按钮中删除“button_on”类，然后在返回 true 时重新添加该类。

【讨论】：

谢谢，但我的问题是我希望程序让我知道状态是否已更改，因为我不知道所选文本是否为粗体。
非常感谢您的回答，非常有帮助。难道没有办法通过注册类似于 onkeyup 的触发器来让事情变得更好，比如当状态改变时触发的 onstylemodified 或 onboldstate？
据我所知，没有这样的事件，但这应该可以正常工作，因为真正改变文本编辑器的仅有两个操作是单击文本中的某处或键入。即使用户使用箭头键在文本之间移动，该事件也会被触发并根据胡萝卜结束的文本进行更新。