Question

我们如何阻止用户从可编辑元素中删除某些标记，例如链接？除了将段落拆分为跨度并在其上分发 contenteditable =＆＃34; true＆＃34; 属性之外，还有其他方法吗？

<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

我对此问题的解决方案：将内容拆分为sup-element，然后将 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内容中的删除

2 个答案: