如何将内容编辑器的粗体工具栏图标通知插入符号设置为粗体文本节点？

Question

例如，我有以下代码：

<div class="toolbar">
    <button>Bold</button>
</div>
<div contenteditable="true">
    This is <b>bold</b> text.
</div>

我将插入号插入<b>bold</b>内，并且此“粗体”按钮之后应更改为“活动”类（突出显示或其他内容）。如何通知内容编辑器的粗体工具栏图标插入符号设置为粗体文本节点？

我知道如何检测插入符号在粗体节点内。我只需要通知工具栏按钮。是否有与此相关的一些教程或模式？

Answer 1

MutationObserver将在这里提供帮助。

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

您可以观察到更改（即添加插入符）并提供响应的动作（即将类添加到指定的节点）。