时间戳

首页 > 解决方案 > 如何通知 contenteditable 编辑器的粗体工具栏图标插入符号设置为粗体文本节点？

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

问题描述

例如，我有这个代码：

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

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

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

标签： javascriptcontenteditable

解决方案

MutationObserver 将在这里提供帮助。

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

您可以观察更改（即添加插入符号）并提供一个动作来做出反应（即向指定节点添加一个类）。

推荐阅读