如何在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的主要内容,如果未能解决你的问题,请参考以下文章

如何在 JavaScript 中删除具有淡出效果的 div?

如何删除跨站点 div 中的 div? [复制]

如何在html里删除一个div?

如何在swift 4中从WKWebView中的网页中删除DIV标签?

如何删除div中的div和所有元素? Javascript,html,css

如何在 woo commerce 的结帐表单字段中删除额外的 div html 类