document.execCommand不遵循CSS

Question

我有一个contentEditable <div> ，它正在变成一个非常简单的文本编辑器。 当按下'tab'时，使用document.execCommand('insertUnorderedList');创建一个项目符号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');创建项目符号时document.execCommand('insertUnorderedList'); 但是，它的样式看起来就像#wysiwyg内的任何旧文本#wysiwyg ，而不是像是一个项目符号，而是如果我在#wysiwyg插入一些初始文本（通过HTML，而不是通过使用contentEditable-ness）然后正确设置项目符号点的样式。

有什么想法吗？

谢谢

Answer 1

不幸的是，这似乎是由基于WebKit的浏览器中的错误引起的（请参阅此答案 ）。 我尝试使用Safari，Chrome和Firefox，但该问题仅出现在Chrome和Firefox上。 不幸的是，除了不添加样式，等待修复或删除多余的HTML外，您无能为力。 如果您想删除多余的HTML，可能会发现“解决Chrome的contenteditable span bug”很有帮助。

注意：这是从我的评论中复制的。