防止某些内容在 contenteditable td 中被编辑答案

【问题标题】：Prevent some content from being edited in contenteditable td防止某些内容在 contenteditable td 中被编辑
【发布时间】：2018-10-22 12:32:47
【问题描述】：

我在contenteditable="true" 的表中有一个td。在td 里面，我有一个span，里面有一些内容。我想让td 可编辑，除了这个span。我该怎么做？

<td colspan="4" contenteditable="true">
  <span class='notForEdit'><i class="fa fa-cog"></i><span>
</td>

【问题讨论】：

不能直接在 HTML 中使用。我敢肯定，您可以拼凑一些非常丑陋的解决方案，以将该字符串保留在 contenteditable 内容的开头，但这将是维护的噩梦。将contenteditable 从td 中取出要简单得多，只需将span 放在另一个包含contenteditable 数据的div 之前。

标签： javascript jquery html contenteditable

【解决方案1】：

为什么不这样做：

<td colspan="4">
  <span contenteditable="true">
    editable test
  </span >
  <span contenteditable="false"><i class="fa fa-cog"></i><span>
  <span contenteditable="true">
    more editable test
  </span >
</td>

【讨论】：

只要父元素上没有使用该属性，就没有必要定义contenteditable="false"。

【解决方案2】：

你可以尝试做这样的事情。

td{
margin:0;
padding:0;
}
p{
float:left;
padding:0.1em;
}

<td>
<p contenteditable="true">
This is a paragraph annd is editable. 
</p>
<p>A solid text.</p>
<p contenteditable="true">
next stuff. 
</p>
</td>

【讨论】：