限制删除 ContentEditable 内容

Question

我们如何防止用户从可编辑元素中删除某些标签，例如链接？除了将段落拆分为跨度并将 contenteditable="true" 属性分配给它们之外，还有其他方法吗？

<p id="content" contenteditable="true">
   Some text here.
   <a href='my_link_1'>click here</a>
   another text here  
   <a href='my_link_2'>click here</a>
   thank you. 
</p>

Answer 1

您可以在 CSS 中使用带有内容集的 span 标签。如果您明白我的意思，它们的可删除性会稍微降低一些，但是嘿，至少如果一个字符被删除，整个内容也会被删除。

<style>
.uneditable:before {
    content: "can't touch this";
}
</style>

<p id="content" contenteditable="true">
Some text here.
<span class="uneditable"></span>
 another text here  
</p>

Answer 2

我对这个问题的解决方案：将内容拆分为子元素，然后将 Contenteditable 属性应用于我们只需要可编辑的内容。
用户完成编辑后，我们可以简单地重新假定这些部分.

<p id="content">
   <span contenteditable="true">Some text here.</span>
   <a href='my_link_1'>click here</a>
   <span contenteditable="true">another text here</span>
   <a href='my_link_2'>click here</a>
   <span contenteditable="true">thank you.</span>
</p>

限制删除 ContentEditable 内容

Limit deletion in ContentEditable contents

html

contenteditable