Question

我试图在contenteditable div中设置一个不可编辑但可删除的div（所有这些都在WYSIWYG编辑器Quill中进行）。

我尝试将子级div contenteditable =“ false”设置为不可编辑，但是当它没有被可编辑的内容包围时，它也使其在Google Chrome中不可删除（在Edge上工作，很有趣）。不允许在子div之前和之后强制添加一些内容，因为这样会不必要地添加额外的行

<div contenteditable="true">
  <p><strong>Editable</strong> Text</p>
  <div contenteditable="false">Non Editable Text</div>
</div>

Answer 1

经过chrome简短测试后，我进行了以下观察，如果无法编辑div形成了块格式化上下文[BFC]（reference），我们将无法删除它，您将能够如果您不可编辑的div不是BFC，则删除该div。

这是一个简单的示例，它不会使div成为BFC。

<style>
  [contenteditable=false] {
    display: inline-block;
  }
</style>
<div contenteditable="true">
  <p><strong>Editable</strong> Text</p>
  <div contenteditable="false">Non Editable Text</div>
</div>

PS：正如我提到的那样，该解决方案基于观察并且有效，但是我不确定为什么会这样，希望有人可以解释为什么

如何启用删除内容可编辑div中的非内容可编辑div

1 个答案: