为CONTENTEDITABLE格式按钮反映选择格式化

Question

我们有一个contenteditable="true" DIV这是我们作为一个所见即所得的文本编辑器使用。我们增加了类似于使用Medium.com

使用execCommand()的一个基本的格式工具栏，我们能够使所选文本加粗，如果，例如，用户按下按钮bold。这很好。

但是，我们尚未设法做的事情是，如果用户选择粗体文本的一部分（如上图所示），则会突出显示bold按钮。这可以通过传递is-active类课程上的按钮来轻松完成，但我们怎么知道是选定的文本，在这种情况下，大胆？

我们认为这或许可以使用Selection API来实现，但这种使用情况下，似乎没有证件。

Answer 1

因为execCommand（）使用html标记包装器，如B标记用于粗体。 所以，当你选择的话，我相信你正在使用某种形式的JS表明格式化tollbar只需添加一些更多的代码在像这样的功能。

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

注：我用js函数“节点名称”来获取这是在这种情况下，大胆/ B则匹配周围的execCommand（）包裹的标签名，如果它的标签相匹配，如果真我加入是活性类工具栏粗体字元素。