使用 document.execCommand('insertHTML', 在 contentEditable 中插入 span答案

【问题标题】：Insert span in contentEditable with document.execCommand('insertHTML',使用 document.execCommand('insertHTML', 在 contentEditable 中插入 span
【发布时间】：2020-03-22 20:04:04
【问题描述】：

我正在开发一个丰富的内容编辑器。配置设置为添加<p>标签作为段落分隔符：

document.execCommand('defaultParagraphSeparator', false, "p");

我必须插入特殊的<span contenteditable='false'> 部分：

document.execCommand('insertHTML', false, "<span contenteditable='false'>...</span>");

插入未按预期完成。

我希望：

<p>something <span>...</span></p>

我明白了：

<p>something </p>
<span>...</span>

我不明白为什么span 标签没有插入到p 标签中。有什么想法吗？

【问题讨论】：

stackoverflow.com/questions/4823691/…
嗨，从来没有听说过 execCommand 但是当我搜索 MDN 时，他们说它已经过时了，请参阅 execCommand。为什么不使用 jQuery 或普通的 js DOM 方法？

标签： javascript html contenteditable

【解决方案1】：

execCommand 在不同的浏览器中有不一致和错误的历史。如今，execCommand 已过时：

此功能已过时。虽然它可能在某些情况下仍然有效浏览器，不鼓励使用它，因为它可以随时删除时间。尽量避免使用它。

来源：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

我建议您阅读此页面以了解最佳替代方案：https://medium.com/@jitubutwal144/three-different-ways-to-build-inline-content-editor-using-javascrpit-d58c2edac9cb

【讨论】：