Contenteditable：防止内部元素被删除

Question

我有一个简单的 contenteditable 标记：

<div class="example" contenteditable="true">
     <div class="inside">Some content</div>
</div>

当我删除“ Some content”时，class="inside"div 也会被删除。有没有办法防止删除内容时删除内部div？

例如，这是我在删除内容后尝试制作的外观。

<div class="example" contenteditable="true">
     <div class="inside"></div> <!-- The div is not deleted -->
</div>

我环顾四周，但似乎没有明确的答案。

任何帮助都感激不尽。

谢谢你。

Answer 1

.inside, .example {
  display: inline;
}

<div class="example" contenteditable="true">
  <div class="inside">Some content</div>
</div>

也许有一种样式是内联级元素。

因为当你删除内容时宽度将为 0%。您无法再次单击它或添加任何内容。

所以，我的解决方案是

.inside, .example {
  display: block;
}

如果需要，您可以指定宽度。:)

.inside, .example {
  display: block;
}

.inside, .example {
  display: block;
}