Обновление состояния кнопки в текстовом редакторе

Question

Я пытаюсь разработать приложение для iPad, и я использую contenteditable функцию. Я создал 3 кнопки (жирный, курсив, подчеркивание), и когда кто-то нажимает на них, они выполняют функцию, используя execCommand. Однако, когда пользователь выбирает слово, выделенное жирным шрифтом, я хочу изменить состояние изображения значка Bold, чтобы оно сообщало пользователю, что выделенный текст выделен жирным шрифтом. Эта функция доступна в таких программах, как ckeditor и tinymce, но я хочу знать, как это делается. Я знаю, что некоторые люди используют таймер, который проверяет все состояния каждую секунду, но я не думаю, что это правильный путь. Может ли кто-нибудь помочь мне с кодом или объяснить, как это можно сделать.

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

Если вы заметили, то, что я сделал, дало каждой из моих кнопок идентификатор "btn_" сфлаг кнопки добавлен к нему.Используя CSS, я создал класс button_on, который соответствующим образом его стилизовал.Возможно, вы захотите просто удалить класс button_on из всех кнопок при каждом вызове updateButtons (), а затем снова добавить класс, когда он возвращает true.