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

【问题标题】：Editing in Chrome behaves differently than in Firefox or Edge在 Chrome 中编辑的行为与在 Firefox 或 Edge 中不同
【发布时间】：2019-04-24 14:11:22
【问题描述】：

考虑一下在网络浏览器中呈现的这段 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 似乎已经决定将 span 替换为 b 元素以达到相同的视觉效果。

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

你可以玩这个

&lt;p contenteditable="true"&gt;&lt;span style="font-weight:bold;"&gt;Bold&lt;/span&gt;.&lt;/p&gt;

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

【问题讨论】：

标签： html google-chrome editing

【解决方案1】：

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

所以你需要阻止 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>

【讨论】：

谢谢。这使得 Chrome 的行为类似于 Firefox 和 Edge。