document.execCommand 不遵守 CSS

【问题标题】：document.execCommand not obeying CSSdocument.execCommand 不遵守 CSS
【发布时间】：2023-03-13 14:14:01
【问题描述】：

我有一个contentEditable <div>，我正在把它变成一个非常简单的文本编辑器。当按下“tab”时，使用document.execCommand('insertUnorderedList'); 创建一个项目符号点，效果很好。但问题是：

HTML：

<div id="wysiwyg">

</div>

CSS：

#wysiwyg{
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-weight: normal;
    font-size: 0.9em;
    color: rgb(70,70,70);
}

#wysiwyg ul li {
    font-family: 'Calendas Regular', serif !important;
    font-size: 1em; 
}

当我使用 document.execCommand('insertUnorderedList'); 创建一个项目符号点时，它的样式就好像它只是我的 #wysiwyg 中的任何旧文本，而不是好像它是一个项目符号点，但是如果我插入一些初始文本 (通过 HTML，而不是通过使用 #wysiwyg 中的 contentEditable-ness)，它会正确设置项目符号的样式。

有什么想法吗？

谢谢

【问题讨论】：

• 我在 Safari 上测试这个，由于某种原因，浏览器在
• 中插入了一个 标记，这似乎干扰了样式表。然而，它像往常一样在轻 DOM 中创建
• 和
  。 Example