Как предотвратить удаление внутреннего промежутка с помощью contenteditable?

Question

У меня есть редактор, использующий тег HTML 5 contenteditable, там я использую span внутри contenteditable, когда я удаляю весь текст, тогда span также удаляется, но я хочу, чтобы span не удалялся, как предотвратить это?

Мой код: -

$('#editor').keyup(function(){
  $('#spanText').text($(this).find('span').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div contenteditable="true" id="editor"><span>This is my text</span></div>

<br><br><hr>
<div id="spanText"></div>

Answer 1

Я думаю, что нет простого способа достичь этого.

Вы можете проверить длину текста элемента, чтобы восстановить элемент обратно.

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

$('#editor').keyup(function(){
  if(!$(this).text().length){
    $(this).html('<span>&nbsp;</span>');
  }
  $('#spanText').text($(this).find('span').text().trim());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div contenteditable="true" id="editor"><span>This is my text</span></div>
</div>
<hr>
<div id="spanText"></div>

Answer 2

Переместить свойство contenteditable в диапазон

<div>
   <span contenteditable="true" id="editor">This is my text</span>
</div>