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

【问题标题】：How to prevent browser from generating html tags in contenteditable divs如何防止浏览器在 contenteditable div 中生成 html 标签
【发布时间】：2019-09-12 16:32:13
【问题描述】：

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

问题1如何防止浏览器在打字时创建b、span、font等标签？

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

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

示例：

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

2-删除word2后：

3- 重新输入后word2：

.g1_bold{
    font-weight: bold;
}

.color_blue{
    color: blue;
}

【问题讨论】：

显而易见的答案是“不要添加 标签”，但根本不知道为什么、在哪里或如何添加它们。恐怕我们不能仅仅猜测你的代码为什么会做某事。
@VLAZ 这是 contenteditable div 的默认行为！我没有编写任何代码来做到这一点！
@VLAZ 我编辑了我的问题。现在更清楚了吗？我不认为问题与我的代码有关！
我无意中发现了an answer 这似乎很相关！

标签： javascript html browser editor

【解决方案1】：

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

.bold {
   // styling
}

与

b {
   // styling
}

【讨论】：

感谢您的回答，但我的格式是基于 css 类的。所以我想尽可能地避免使用 html 标签。