如何防止在子元素中继承contenteditable标记？

Question

我有一个简单的<div contenteditable>，里面有<span>。 <div>内部的文字我想要编辑，但<span>我不希望用户能够编辑。

样品：

#editable {
  background-color: #ccc;
  padding: 5px;
  width: 400px;
  text-align: center;
}

span {
  background-color: green;
  color: white;
  padding: 2px;
  
}

<div id="editable" contenteditable>
  Sample text including a <span>FANCY TAG</span> in the middle.
</div>

所需的最终结果是一个框，用户可以在其中输入他们想要的内容，但内联样式标签不可编辑。由于您无法将<span>标记放在<input type="text">或<textarea>块内，因此我使用<div contenteditable>。

除{/ em> <div>外，如何在<span>可编辑的中制作所有文字？

Answer 1

将contenteditable="false"添加到span tag，这会阻止用户修改span tag.

#editable {
  background-color: #ccc;
  padding: 5px;
  width: 400px;
  text-align: center;
}

span {
  background-color: green;
  color: white;
  padding: 2px;
  
}
 

<div id="editable" contenteditable>
  Sample text including a <span contenteditable="false">FANCY TAG</span> in the middle.
</div>