comparison 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
comparison
equal deleted inserted replaced
18:94e26bffd4fb 19:da006d1c1eba
1 <!doctype html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 [contentEditable] {
7 padding: 7px;
8 border: 1px solid #777;
9 white-space: pre-wrap;
10 }
11 </style>
12 <script>
13 function log() {
14 let edit = document.querySelector('[contentEditable]');
15 console.log(edit.innerHTML);
16 //console.log(edit.textContent);
17 }
18 function test() {
19 let edit = document.querySelector('[contentEditable]');
20 edit.focus();
21 let s = getSelection();
22 let r = s.getRangeAt(0);
23 //console.log(s);
24 r.deleteContents();
25 let t = document.createTextNode('\n');
26 r.insertNode(t);
27 r.collapse();
28 }
29 </script>
30 </head>
31 <body>
32 <p>top</p>
33 <div contentEditable>
34 aaa <b>bbb</b> <i>iii</i>
35 1
36 2
37 3
38 zzz
39 </div>
40 <p>
41 <button onclick="log()">log</button>
42 <button onclick="test()">test</button>
43 </p>
44 <p>bottom</p>
45 </body>
46 </html>