contentEditable div with non-editable child

user_8506579 0
Viewed 859

I have a contentEditable div A, containing a non-editable div B, that contain editable 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/

When my caret is next to my non-editable div B (with blue outline), I would like to be able to select or delete that block, pressing Delete or Backspace, but I can't.

I can delete or select my non-editable div only when it contains non editable divs inside : https://jsfiddle.net/Ladxbou1/4/ (but it isnt highlighted while selected so it looks weird.

Could there be a clean workaround or do I need to write clunky Javascript to make it work?

contenteditable css html javascript
1 Answers

You can definitely delete the whole <div class="b"> element by selecting it with your mouse, even if there are no editable elements inside. A cursor-based selection seems impossible (at least I haven't managed it). And yes, you are right, it is a bit awkward, that you cannot see the selection ...

In any case the conteditable attribute is viewed by many as "not such a great idea", as it allows fairly unstructured formatted input to be generated that might require additional "sanitization"-effort before it can be used for further processing or storage.

.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>

user_26100610
Related