在 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 元素替换 span 以达到相同的视觉效果。

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

你可以玩这个

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

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

Answer 1

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

所以你需要阻止 chrome 这样做的是 Document.execCommand() 并且它会在删除之前保留之前的元素并使用之前的样式。

所以您需要的命令是 styleWithCSS，它用样式替换了 contentEditable 中的内容。

styleWithCSS

Replaces the useCSS command. true modifies/generates style attributes in markup, false generates presentational elements.

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

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

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

Editing in Chrome behaves differently than in Firefox or Edge