Javascript 在ContentEditable中使用阴影DOM创建受保护的文本块

最近，我使用ContentEditable开发了一个简单的编辑器。应用程序的要求很简单，唯一的例外是能够插入受正常编辑操作保护的文本块

这些文本块无法编辑，必须作为单个字符来移动光标或删除它们

生成的HTML示例如下所示：

<div id="editor" contenteditable style="height: 400px; border: 1px solid black; margin: 4px; padding: 4px; overflow:auto;">
  "This is standard text with a "
    <span class="attrib">
      #shadow-root
        "PROTECTED"
      "_"
    </span>
  " block"
</div>

“这是标准文本，带有”
#影子根
“受保护”
"_"
“块”

虽然这提供了我需要的文本的受保护部分，但它有几个我无法解决的主要问题：

• 阴影DOM元素后的文本不显示
• 光标根本不会在shadowDOM元素中移动

---

是否有更好的方法来实现这一点，或者说不可能以这种方式使用阴影DOM？

解决方案1

您可以强制受保护元素中的

contenteditable

属性为

false

：

“这是带有
受保护的
块“

谢谢。我的第一次尝试是使用contenteditable=“false”，但我发现这种方法也存在一些问题，特别是当受保护的部分出现在文本末尾（奇怪的光标行为）或选择要复制的文本时。一些浏览器比其他浏览器更糟糕，尽管我不得不承认contenteditable的问题比使用ShadowDOM的问题要少。我想我只是希望找到一个更可靠的解决方案，不需要太多的工作来解决问题。@Jason我已经更新了我的答案以使用Shadow DOM，但正如您自己所注意到的，它需要更多的工作来处理所有的极限情况。谢谢@Supersharp。它可能会防止我在contenteditable方面遇到的一些问题，因此我将尝试类似的方法。