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

Question

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

Question1我应该如何防止浏览器在输入时创建b, span,font和其他标签？

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

Question2有没有办法覆盖这种行为？浏览器是否有任何 api 用于知道它应该插入<b>标签？

例子：

1- 用我的编辑器添加样式会创建这个 div，看起来像：

2-删除word2后：

3- 重新输入word2后：

.g1_bold{
    font-weight: bold;
}

.color_blue{
    color: blue;
}

标签： javascripthtmlbrowsereditor

Answer 1

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

.bold {
   // styling
}

和

b {
   // styling
}