javascript - execCommand 向我的元素添加不需要的样式

Question

所以我正在创建类似在线文本编辑器的东西。在经历了一些错误之后，我只注意到如果我尝试做一些事情，比如在中心对齐一些文本，它会创建一个带有 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

有关我如何做到这一点的任何建议，以便将父元素字体粗细和大小属性应用于文本而不是它自己的属性，或者如何首先阻止它创建这些属性。

谢谢!

Answer 1

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