Javascript 具有不可编辑子级的contentEditable div

我有一个内容可编辑的分区a，包含一个不可编辑的分区B，其中包含可编辑分区C&D

<div class="a" contenteditable>
blablabla
  <div class="b" contenteditable=false>
    <div class="c" contenteditable>
    </div>
    <div class="d" contenteditable>
    </div>
  </div>
bleh
</div>

喋喋不休
呜呜

当插入符号位于不可编辑的div B（带蓝色轮廓）旁边时，我希望能够选择或删除该块，按delete或Backspace，但我不能

我只能在不可编辑的div中包含不可编辑的div时删除或选择它，但选中时它不会高亮显示，因此看起来很奇怪

---

是否有一个干净的解决方法，或者我需要编写笨拙的Javascript来让它工作？

你可以通过鼠标选择整个

元素来删除它，即使里面没有可编辑的元素。基于光标的选择似乎是不可能的（至少我没有管理它）.是的，你是对的，这有点尴尬，你看不到选择

在任何情况下，

conteditable

属性被许多人视为“不是一个好主意”，因为它允许生成相当非结构化的格式化输入，而这些输入可能需要额外的“清理”工作，才能用于进一步的处理或存储

.a{
边框：1px灰色虚线；
填充物：5px；
}
.b{
边框：1px蓝色虚线；
填充物：5px；
宽度：100px；
垂直对齐：中间对齐；
显示：内联块；
}
c{
边框：1px红色虚线；
}
博士{
边缘顶部：5px；
边框：1px绿色虚线；
}
*：焦点{
大纲：无；
}

a类，可编辑
b类
c类
d类
a的其余部分，可编辑

你可以用鼠标选择整个

元素，即使里面没有可编辑的元素。基于光标的选择似乎不可能（至少我没有管理它）。是的，你是对的，这有点尴尬，你看不到选择

在任何情况下，

conteditable

属性被许多人视为“不是一个好主意”，因为它允许生成相当非结构化的格式化输入，而这些输入可能需要额外的“清理”工作，才能用于进一步的处理或存储

.a{
边框：1px灰色虚线；
填充物：5px；
}
.b{
边框：1px蓝色虚线；
填充物：5px；
宽度：100px；
垂直对齐：中间对齐；
显示：内联块；
}
c{
边框：1px红色虚线；
}
博士{
边缘顶部：5px；
边框：1px绿色虚线；
}
*：焦点{
大纲：无；
}

a类，可编辑
b类
c类
d类
a的其余部分，可编辑

如果我将所有内容都设置为contenteditable，将插入符号放在蓝色块旁边并按backspace不会删除蓝色块，而是删除绿色块：如果我将所有内容设置为contenteditable，将插入符号放在蓝色块旁边并按backspace不会删除蓝色块，而是删除绿色块：我想我将使用open源所见即所得编辑器，而不是像TinyMCE或CKEditor那样。我甚至没有启动，contentEditable看起来已经像噩梦了。我想我将使用开源所见即所得编辑器，而不是像TinyMCE或CKEditor那样。我甚至没有启动，contentEditable看起来已经像噩梦了