Question

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

Answer 1

查找document.queryCommandState（）方法以找到答案

我相信你会传递一个返回true或false的标志，例如......

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');   
    } 
  }
}

如果您注意到，我所做的就是为每个按钮添加“btn_”ID，并附上按钮标志。然后使用CSS我创建了一个button_on类，相应地对其进行样式化。您可能只想在每次调用updateButtons（）时从所有按钮中删除'button_on'类，然后在返回true时重新添加该类。

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

1 个答案: