如何防止浏览器在内容可编辑的div中生成html标签

Question

我正在使用JavaScript进行在线编辑。为了格式化，我使用了span和class。在我的设计中，每个段落都是contenteditable div，内部html是text节点，span节点和br节点的序列。

[当我删除跨度中文本的某些部分时，一切都很好，但是当我删除具有bold类的跨度中的所有字符时，跨度也将被去除，当我写一个新字母时，会出现一个<b>标记介绍！

以粗体显示是理想的行为，但是使用<b>代替bold类的跨度会给我带来麻烦！当然<b>标签只是用于演示！

Question1如何防止浏览器在键入时创建b，span，font和其他标签？

Question2有什么方法可以替代此行为？有相关的事件属性吗？

示例：

1-用我的编辑器添加样式会创建此div，如下所示：

删除单词2后的2-：

3-重新输入word2：

.g1_bold{
    font-weight: bold;
}

.color_blue{
    color: blue;
}

Answer 1

[当您从内容可编辑div中的<span>中删除所有文本时，它看起来像是从dom中删除，并且在您键入新文本时不会重新添加。但是<b>将被重新添加，我建议使用<b>而不是<span class="bold">，然后替换此CSS

.bold {
   // styling
}

with

b {
   // styling
}