Кнопки форматирования для contentEditable отражают выбор форматирования

Question

У нас есть div contenteditable="true", который мы используем как текстовый редактор wysiwyg. Мы добавили основную панель инструментов форматирования, похожий на тот, который использует Medium.com

Используя execCommand(), мы можем сделать выбранный текст жирным, если, например, пользователь нажимает кнопку bold. Это отлично работает.

Однако, нам еще не удалось сделать кнопку bold, если пользователь выделил часть текста, выделенную полужирным шрифтом, как показано на рисунке выше. Это можно легко сделать, пройдя класс is-active на кнопке, но как нам знает, что выделенный текст в этом случае выделен жирным шрифтом?

Мы считаем, что это может быть сделано с использованием API Selection, но этот прецедент кажется недокументированным.

Answer 1

с помощью execCommand() использовать обертки тегов html, такие как B tag для жирного шрифта. Итак, когда вы выбираете слово, я уверен, что вы используете какой-то js, чтобы показать, что формирование tollbar просто добавляет еще несколько кодов в эту функцию, подобную этой.

if(selectedElement.nodeName == "B"){ 
    toolbarBoldButton.classlist.add("is-active"); 
} 

Примечание: JS я использую функцию «NODENAME», чтобы получить имя тега, который был завернут ExecCommand() в этом случае полужирный/B, то сопрягая, если он соответствует тег, и если верно я добавив is-active class для панелей инструментов Bold style element.