javascript - 带有不可编辑子项的 contentEditable div

Question

我有一个 contentEditable div A，包含一个不可编辑的 div B，其中包含可编辑的 div 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>

https://jsfiddle.net/Ladxbou1/1/

当我的插入符位于不可编辑的 div B(带有蓝色轮廓)旁边时，我希望能够选择或删除该 block ，按 Delete 或 Backspace，但我不能。

只有当它包含不可编辑的 div 时，我才能删除或选择我的不可编辑的 div:https://jsfiddle.net/Ladxbou1/4/ (但它在被选中时没有突出显示，所以看起来很奇怪。

是否有一个干净的解决方法，或者我是否需要编写笨拙的 Javascript 才能使其工作？

Answer 1

你绝对可以删除整个<div class="b">元素通过用鼠标选择它，即使里面没有可编辑的元素。基于光标的选择似乎是不可能的(至少我还没有做到)。是的，你是对的，有点尴尬，你看不到选择......

无论如何conteditable属性被许多人视为“不是一个好主意”，因为它允许生成相当非结构化的格式化输入，这可能需要额外的“净化”-努力才能用于进一步处理或存储。

.a {
border: 1px dashed gray;
padding: 5px;
}

.b {
  border:1px dashed blue;
  padding:5px;
  width:100px;
  vertical-align:middle;
  display:inline-block;
}
.c {
  border:1px dashed red;
}
.d {
  margin-top:5px;
  border:1px dashed green;
}
*:focus {
  outline: none;
}

<div class="a" contenteditable>
class a, editable
  <div class="b" contenteditable="false">class b
    <div class="c">class c
    </div>
    <div class="d">class d
    </div>
  </div>
rest of a, editable
</div>