Javascript 在contenteditable div中添加或修改文本/内容，而不使用execCommand？

document.execCommand（）已过时。因此，在2020年，制作所见即所得编辑器并不是那么容易。在阅读了大量文章和答案后，我发现大多数答案（开发人员）更喜欢使用：

• document.createRange（）
• window.getSelection（）
• 附肢儿童
• 插入之前
• 下一步
• 孩子等

但是怎么做呢？他们没有给出任何例子。我想在点击

B

按钮后将“伏地魔”一词加粗。我只需要了解一下工作流程

B

伏地魔回来了

首先，检测Ctrl+B键的按下（）。之后：

获取选择范围：

在范围的开头插入

，在范围的结尾插入

将span元素的字体大小设置为粗体

---

这篇文章：似乎有你正在寻找的例子。如何在特定的字符位置插入span嘿，我刚刚意识到Ctrl+B、Ctrl+U和Ctrl+I快捷键都可以在Chrome和Microsoft Edge中使用。您使用的是什么浏览器导致您面临此问题？我需要下载它来解决问题。你不必担心键盘快捷键。我说当有人点击一个特定的按钮时，我有一个名为B的按钮（不需要键盘快捷键）。我只需要知道如何在特定的字符位置插入span的主要概念，所以首先要知道范围的开始和结束。接下来，在末尾插入字符串

“”

。然后，在开头插入字符串

“”

。所有这些都可以通过javascript的slice函数来完成。