所以我正在创建类似在线文本编辑器的东西。在经历了一些错误之后,我只注意到如果我尝试做一些事情,比如在中心对齐一些文本,它会创建一个带有 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")
之前和之后拍了两张照片。
有关我如何做到这一点的任何建议,以便将父元素字体粗细和大小属性应用于文本而不是它自己的属性,或者如何首先阻止它创建这些属性。
谢谢!
最佳答案
嗯,我好像明白了。出于某种原因,由于父 contenteditable="true"
没有设置它的 font-size
和 font-weight
,它创建了额外的跨度。所以我将这些样式属性添加到父 div 并停止创建它。如果有人再次遇到这个问题,希望这会有所帮助:)
关于javascript - execCommand 向我的元素添加不需要的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57743010/