Chrome中的编辑行为与Firefox或Edge中的编辑行为不同

Question

在网络浏览器中呈现时，请考虑以下HTML：

<p contenteditable="true"><span style="font-weight:bold;">Bold</span>.</p>

例如，在Firefox 66和Edge 17中，突出显示文本的所有五个字符（即包括句号）并键入单词“ New”将导​​致以下标记：

<p contenteditable="true"><span style="font-weight:bold;">New</span></p>

但是，如果您在Chrome 73中执行相同的操作，则会得到：

<p contenteditable="true"><b>New</b></p>

Chrome似乎决定用 b 元素替换跨度，以实现相同的视觉效果。

有什么办法可以阻止这种情况的发生？我有一个文本编辑器，对此行为感到非常困惑。

您可以与此

一起玩

<p contenteditable="true"><span style="font-weight:bold;">Bold</span>.</p>

注意：如果所有文本都在范围内（因此在此示例中没有句号），则不会创建 b 元素。

Answer 1

您是对的 Chrome 决定用类似的样式替换新文本

因此，您需要阻止Document.execCommand() 并会保留之前的样式，并保留之前的样式。

所以您需要的命令是styleWithCSS，该命令将contentEditable中的内容替换为样式。

  

styleWithCSS

     

替换useCSS命令。 true修改/生成标记中的样式属性，false生成表示元素。

document.execCommand('styleWithCSS', false, 'true')

document.execCommand('styleWithCSS', false, 'true')

    <p contenteditable="true">
<span style="font-weight:bold;">Bold</span>.</p>