javascript - 如何防止浏览器在contenteditable div中生成html标签

Question

我正在使用 javascript 开发在线编辑器。对于格式化，我使用跨度和类(参见下面的示例)。我的问题是在使用编辑器一段时间后，浏览器向 html 内容添加了一些不需要的标签，例如 <b>标签或嵌套跨度。我应该如何防止浏览器添加 <br> 以外的标签？

问题1我应该如何阻止浏览器创建b , span , font以及输入时的其他标签？

在下面的示例场景中，以粗体键入是所需的行为，但使用 <b>而不是 bold 的跨度上课给我带来了麻烦!

问题2有什么方法可以覆盖此行为吗？浏览器是否有任何 api 可以知道它应该插入 <b>标签？

示例:

1- 使用编辑器添加样式创建此 div，如下所示:

2-删除word2后:

3-重新输入word2后:

.g1_bold{
    font-weight: bold;
}

.color_blue{
    color: blue;
}

Answer 1

看起来就像您从 <span> 中删除所有文本一样。在 contenteditable div 中，它会将自身从 dom 中删除，并且当您键入新文本时不会重新添加。一个<b>但是会重新添加，我建议使用 <b>而不是<span class="bold">然后替换这个CSS

.bold {
   // styling
}

与

b {
   // styling
}