如何在contenteditable div中删除非contenteditable div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在contenteditable div中删除非contenteditable div相关的知识，希望对你有一定的参考价值。
我试图在一个令人满意的div中有一个不可编辑但可删除的div（所有这一切都发生在WYSIWYG编辑器中，Quill）。
我尝试设置子div contenteditable =“false”，这使得它不可编辑，但是当它没有被可编辑内容包围时，它也使得它在Google Chrome中不可删除（Works on Edge，有趣的是）。在子div之前和之后强制添加一些内容不是一个选项，因为它会不必要地添加额外的行
<div contenteditable="true">
<p><strong>Editable</strong> Text</p>
<div contenteditable="false">Non Editable Text</div>
</div>答案
我在chrome中进行简单测试后做了以下观察，如果它形成一个块格式上下文[BFC]（reference），我们无法删除不可编辑的div，如果你的非div，你将能够删除div可编辑的div不是BFC。
这是一个简单的例子，它不会使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>以上是关于如何在contenteditable div中删除非contenteditable div的主要内容，如果未能解决你的问题，请参考以下文章
当焦点在 contenteditable div 上时删除所有侦听器
如何在 IE 的 contentEditable div 中获取选定的文本节点？
如何在 IE 的 contentEditable div 中获取选定的文本节点？
如何使用 jQuery 在 contenteditable div 中移动插入符号？