view src/test/editor.html @ 19:da006d1c1eba

use contentEditable
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 13 Jul 2022 08:47:13 -0600
parents
children 3ea49246d6a7
line wrap: on
line source

<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			[contentEditable] {
				padding: 7px;
				border: 1px solid #777;
				white-space: pre-wrap;
			}
		</style>
		<script>
			function log() {
				let edit = document.querySelector('[contentEditable]');
				console.log(edit.innerHTML);
				//console.log(edit.textContent);
			}
			function test() {
				let edit = document.querySelector('[contentEditable]');
				edit.focus();
				let s = getSelection();
				let r = s.getRangeAt(0);
				//console.log(s);
				r.deleteContents();
				let t = document.createTextNode('\n');
				r.insertNode(t);
				r.collapse();
			}
		</script>
	</head>
	<body>
		<p>top</p>
		<div contentEditable>
aaa <b>bbb</b> <i>iii</i>
1
2
3
zzz
		</div>
		<p>
			<button onclick="log()">log</button>
			<button onclick="test()">test</button>
		</p>
		<p>bottom</p>
	</body>
</html>