document.execcommand（＆＃x27; removeformat＆＃x27;）在尝试通过document.execcommand设置格式时在chrome上失败

Question

我正在通过document.execcommand（'hilitecolor'，false，'＃d4ecff'）;添加在可满足元素中的一些背景。。

如果所选文本包含一些格式标签（＆lt; b＆gt;＆lt;/b＆gt;例如），请调用document.execcommand（'removeformat'删除所有格式。就像背景颜色传递给以前包含在＆lt; b＆gt;＆lt;/b＆gt;中的文本一样。

我正在面对Chrome（版本100.0.4896.75-64位）以及勇敢（版本1.37.111 Chromium：100.0.0.4896.79-64位）。一切似乎都按照Firefox的预期工作。

这是一个演示和复制的步骤： https://jsfiddle.net/l82ogcf5/

我知道不再建议使用document.execcommand（），因此请不要指出。直到该功能真正贬低为止，这是无关紧要的（我们都知道这不会很快发生）。

Answer 1

您正在添加 hiliteColor！但随后您想要删除任何格式。
首先， 标记将被删除，只有在第二次单击后，hiliteColor 才会被删除。

你想要的是：

// Remove hiliteColor, not other text formatting
btn2.onclick = () => document.execCommand("hiliteColor", false, "transparent");

示例：

const btn1 = document.querySelector("#btn1");
btn1.onclick = () => document.execCommand("hiliteColor", false, "red");

const btn2 = document.querySelector("#btn2");
btn1.onclick = () => document.execCommand("hiliteColor", false, "transparent");

#input {
  margin-top: 1rem;
  border: 1px solid;
}

Steps to reproduce:
<ol>
  <li>Select all the text inside #input</li>
  <li>Click on the button 1 - "add background colour"</li>
  <li>Click on the button 2 - "remove format</li>
  <li>Do you see a red background where the bold text was? Here's my bug</li>
</ol>
<button id="btn1">add background colour</button>
<button id="btn2">remove format</button>
<div id="input" contenteditable="true">
  I am a real
  <strong>nice test</strong> string
</div>

PS：遗憾的是，这项技术即将消亡（好吧，也许不会那么快，因为目前有如此多的应用程序是在 contenteditable 和 execCommand 上驱动的）。只是因为，由 IE 引入，并且随着竞争对手浏览器的兴起，他们在规范上都存在分歧，它慢慢地变成了一个无法处理的野兽......目前在积极开发或书面规范中没有替代品，据我所知。

Answer 2

首先，.execCommand是斩首的，其次，在chromium中，removeFormat函数是分层工作的。它删除了背景颜色，因为它是格式化的第一层。它仅删除了粗体文本上的粗体，因为它是那里的第一层格式。尝试重复该命令 4 次以突出显示、粗体、斜体和下划线。我假设您正在尝试创建一个具有可调整格式的文本框？

仅就本例而言，解决方案是执行 undo 作为命令，而不是 clearformatting。

或者，您可以再次执行 execCommand，将突出显示颜色设置为白色或透明或其他颜色。