contentEditable div 与 non-editable child

Question

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

当我的插入符在我的 non-editable div B（蓝色轮廓）旁边时，我希望能够 select 或删除该块，按 Delete 或 Backspace , 但我不能。

我可以删除或 select 我的 non-editable div 仅当它包含不可编辑的 div 时： https://jsfiddle.net/Ladxbou1/4/ （但它没有突出显示select所以看起来很奇怪。

是否可以有一个干净的解决方法，或者我是否需要编写笨拙的 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>

contentEditable div 与 non-editable child

contentEditable div with non-editable child

html

javascript

css

contenteditable