Как предотвратить удаление «раздела» из <div contenteditable> при редактировании? - PullRequest
Новая
       10

Как предотвратить удаление «раздела» из <div contenteditable> при редактировании?

0 голосов
/ 12 сентября 2018

Как запретить пользователю удалять

из редактора
во время редактирования (хотя бы нажатием клавиш «Удалить» / «Возврат»)? 

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<style>
		#editor {
			width: 100%;
			height: 300px;
			border: 1px black solid;
		}
		#dont-remove-me-please{
			width: 100%;
			height: 100px;
			border: 1px red dashed;
		 font-weight: bold;
		 user-select: none;
		}
	</style>
</head>

<body>
	<div id="app"></div>

	<div contenteditable="true" id="editor">
		<div>hey guys!</div>
		<div><strong>more text...</strong></div>
		<section id="dont-remove-me-please" contenteditable="false">DONT' REMOVE ME!!!</section>
		<div><br></div>
	</div>
	<script>
		document.getElementById('editor').focus()
	</script>
</body>

</html>

Спасибо.

1 Ответ

0 голосов
/ 12 сентября 2018

Чтобы достичь ожидаемого результата, используйте нижеприемник прослушивания событий и добавьте атрибут contenteditable на основе идентификатора 

<script>
        document.getElementById('editor').addEventListener('click', function(e) { 
                     if(e.target.id !=="dont-remove-me-please"){
                         e.target.setAttribute("contentEditable", true);
                     }
                  }, false);
    </script>

пример кода - https://codesandbox.io/s/rypy7wkn5m

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<style>
		#editor {
			width: 100%;
			height: 300px;
			border: 1px black solid;
		}
		#dont-remove-me-please{
			width: 100%;
			height: 100px;
			border: 1px red dashed;
		 font-weight: bold;
		 user-select: none;
		}
	</style>
</head>

<body>

	<div id="app"></div>

	<div id="editor">
		<div>hey guys!</div>
		<div><strong>more text...</strong></div>
		<section id="dont-remove-me-please" contenteditable="false">DONT' REMOVE ME!!!</section>
		<div><br></div>
	</div>
	<script>
		document.getElementById('editor').focus()
	</script>
		<script>
			document.getElementById('editor').addEventListener('click', function(e) { 
						 if(e.target.id !=="dont-remove-me-please"){
							 e.target.setAttribute("contentEditable", true);
						 }
					  }, false);
		</script>
</body>

</html>
...