删除 contentEditable 中生成的内联样式，同时保留 Chrome 中的原始选择

Question

我的页面上有一个内容可编辑元素，虽然它以某种方式工作，但我在 Google Chrome 浏览器中遇到了一些问题，因为它有时似乎将元素包装到span具有内联样式的元素中，这尤其令人恼火。

如果我打电话

document.execCommand("removeFormat", false, null);

块/段落转换后，它确实删除了这些跨度。但是有两个主要问题：

1. 它还删除了选择中的斜体和粗体格式（尽管我想我可以接受）
2. 它只删除选择内的格式，但如果您运行一些块格式（如（无）有序列表），不仅仅是选择被格式化，选择之外的所有内容仍然保留span带有内联样式的 s。

你可以在这个 JSFiddle（用谷歌浏览器打开）中观察这种行为。

我以为我能做的

所以我想我可以做到以下几点：

1. 当我想做一些块格式时，我会修改选择以包含整个段落/文本行
2. 进行格式化
3. 删除选择中的格式
4. 恢复原始选择

但是我遇到了#4 的问题，因为原始选择节点已经在那些span不再存在的元素中，所以我无法恢复我的选择。

我该如何解决这个问题？

问题 TLDR

当您选择部分行并将其设为（无）有序列表时，Google Chrome 会插入span具有内联样式的元素。

我想用内联样式删除那些令人讨厌的跨度，同时保留原始选择。