Как сделать определённые div-элементы в contenteditable неудаляемыми через backspace?

Question

[SET1]

Пишу редактор контента на javascript. В редакторе есть несколько div'ов, которые должны быть неудаляемые. Сейчас если курсор мыши поставить на строку ниже блока и нажать backspace, то блок удаляется как обычная строка. Предложите варианты решения этой проблемы. Пытался ставить на сам блок атрибут contenteditable="false", но он просто запрещает редактировать содержимое самого блока, но удалить его по-прежнему можно.

Answer 1

[SET1]

Проблему решил самостоятельно банальной проверкой соседних символов курсора:

document.getElementById('editor').addEventListener('keydown', function(event)
		{
			if(event.keyCode == 8)
			{
				var range = window.getSelection().getRangeAt(0);
				
				if(range.collapsed)
				{
					var text = range.startContainer.innerHTML.substr(0, range.startOffset + 10);
					
					if(text.includes('div'))
					{
						event.preventDefault();
					}
				}
			}
		});

Answer 2

[zkrvndm]

Неудалямые элементы попробуйте разместить во вне редактора и отпозиционировать абсолютно, как вам нужно. Также вы можете перехватывать событие предшествующее удалению, отменять его и уже затем решать, разрешать удаление или нет.

Answer 3

[hzzzzl]

может попробовать так?

<div contenteditable>write here</div>
<div class="not-contenteditable">i will always stay here</div>
<div contenteditable>write here</div>