execCommand 为我的元素添加了不需要的样式答案

【问题标题】：execCommand adds unwanted styling to my elementsexecCommand 为我的元素添加了不需要的样式
【发布时间】：2020-01-04 16:02:39
【问题描述】：

所以我正在创建类似于在线文本编辑器的东西。在经历了一些错误之后，我只是注意到，如果我尝试做一些事情，比如在中心对齐一些文本，它应该会创建一个带有 text-align: center 的 div。但是，它也最终创建了一个我不想要的具有字体和粗细属性的跨度，因为字体将由用户在父元素中设置，并且由于文本位于具有自己的字体和粗细属性的跨度中，所以它永远不会被应用。

所以在我点击中心按钮之前，它看起来像

    <div contenteditable="true">Write your text here!</div>

之后

    <div contenteditable="true">
        <div style="text-align: center;">
            <span style="font-size: 1rem; font-weight: 400;">Write your text here!</span>
        </div>
    </div>

当我想要它时

    <div contenteditable="true">
        <div style="text-align: center;">
            Write your text here!
        </div>
    </div>

如果您希望看到实际示例，我在元素上使用 execCommand("justifyCenter") 之前和之后拍了两张照片。

Before

After

关于如何制作的任何建议，以便将父元素的字体粗细和大小属性应用于文本而不是其自身的属性，或者如何阻止它首先创建这些属性。

谢谢！

【问题讨论】：

标签： javascript html css execcommand

【解决方案1】：

好吧，我似乎已经想通了。由于某种原因，由于父 contenteditable="true" 没有设置 font-size 和 font-weight，它创建了额外的跨度。所以我将这些样式属性添加到父 div 并停止创建它。如果有人再次遇到这个问题，希望这会有所帮助:)

【讨论】：

【解决方案2】：

插入带有围绕选择的 div 的 HTML 对我有用。您需要为您的理由类型设置 div 的样式。

document.execCommand("insertHTML", false, "<div style='text-align: center;'>"+ document.getSelection()+"</div>");

【讨论】：