Можно ли предотвратить удаление дочерних элементов, когда их родительский элемент является contentEditable?

Question

Когда элемент равен contentEditable, его дочерние элементы могут быть удалены. Если одним из этих дочерних элементов является , а не contentEditable, содержимое дочернего элемента не может быть отредактировано, но сам элемент все еще может быть удален. Это можно продемонстрировать в следующем примере.

Можно ли предотвратить удаление этих дочерних элементов?

div {
  height: 100px;
  border: 1px solid #CCC;
  margin: 5px;
  padding: 5px;
  width: 300px;
}

span {
  color: #999;
}

<div contentEditable="true">Hello <span contentEditable="false">world</span>!</div>

Answer 1

Можно ли предотвратить удаление этих дочерних элементов?

Нет, но есть альтернативное решение.

Демонстрация:

Поскольку у нас не может быть прямых потомков, нам нужно создать два отдельных элемента.

<div class="editor">
  <label class="editor-label">You can't remove me</label>
  <div class="editor-area" contentEditable="true"></div>
</div>

Затем мы удаляем label из потока, чтобы он не оказывал никакого влияния на area .

.editor {
  border: solid 1px #CCC;
  position: relative; // context for label
  line-height: 1.5;
}

.editor-area {
  min-height: 100px;
  padding: 5px;
}

.editor-label {
  position: absolute; // out of the flow
  padding: 5px 0 0 5px;
  user-select: none;
}

Наконец, чтобы каретка начиналась после текста label , нам нужно знать ее ширину и применить ее к значению area * text-indent.

var editorLabel = document.querySelector('.editor-label');
var editorArea = document.querySelector('.editor-area');

var editorLabelRect = editorLabel.getBoundingClientRect();

editorArea.style.textIndent = editorLabelRect.width + 'px';
editorArea.innerHTML = '&nbsp';

---

Полный код:

var editorLabel = document.querySelector('.editor-label');
var editorArea = document.querySelector('.editor-area');

var editorLabelRect = editorLabel.getBoundingClientRect();

editorArea.style.textIndent = editorLabelRect.width + 'px';
editorArea.innerHTML = '&nbsp';

.editor {
  border: solid 1px #CCC;
  position: relative;
  line-height: 1.5;
}

.editor-area {
  min-height: 100px;
  padding: 5px;
}

.editor-label {
  position: absolute;
  margin: 5px 0 0 5px;
  user-select: none;
}

<div class="editor">
  <label class="editor-label">You can't remove me</label>
  <div class="editor-area" contentEditable="true"></div>
</div>

Answer 2

Если вы можете использовать классы, это будет легко.

<div class="contentEditable">Hello <span class="contentNotEditable">world</span>!</div>
<div class="saveContent" style="display: none;"></div>

Javascript / Jquery Part

<script>
$(".contentEditable").on("click",function(){
 // make blank .saveContent
 $(".saveContent").html("");

 // copy all contentNotEditable class which inside selected contentEditable class.
 $( this ).find(".contentNotEditable").clone().appendTo( ".saveContent" );

 // make blank contentEditable
 $( this ).html("");

 // clone contentNotEditable to contentEditable
 $( ".saveContent" ).find(".contentNotEditable").clone().appendTo( ".contentEditable" );
});
</script>