@SET1

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

Пишу редактор контента на javascript. В редакторе есть несколько div'ов, которые должны быть неудаляемые. Сейчас если курсор мыши поставить на строку ниже блока и нажать backspace, то блок удаляется как обычная строка. Предложите варианты решения этой проблемы. Пытался ставить на сам блок атрибут contenteditable="false", но он просто запрещает редактировать содержимое самого блока, но удалить его по-прежнему можно.
  • Вопрос задан
  • 41 просмотр
Решения вопроса 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();
					}
				}
			}
		});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@zkrvndm
Боты, парсеры, расширения
Неудалямые элементы попробуйте разместить во вне редактора и отпозиционировать абсолютно, как вам нужно. Также вы можете перехватывать событие предшествующее удалению, отменять его и уже затем решать, разрешать удаление или нет.
Ответ написан
hzzzzl
@hzzzzl
может попробовать так?

<div contenteditable>write here</div>
<div class="not-contenteditable">i will always stay here</div>
<div contenteditable>write here</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 окт. 2020, в 06:46
3000 руб./за проект
21 окт. 2020, в 22:40
300 руб./за проект
21 окт. 2020, в 22:34
25000 руб./за проект