如何使用JavaScript在contentEditable div中插入自定义标记或图像？

stackoverflow中已存在使用execCommand（）的答案。但是我们都知道execCommand已经过时了

那么，如何在contentEditable div中更改任何内容或添加或修改文本或内容呢？据我所知，media.com、CKeditor和许多其他编辑器使用contentEditable来制作编辑器。他们如何更改/修改其内容

它应该像文本编辑器一样工作，选择任何特定文本，然后更改/修改或在其中插入新项目。[学习目的]

粗体文本、斜体文本、插入图像、标题文本等

<div contenteditable="true">
  Bold text, italic text, insert images, Heading text, etc
</div>