Mercurial Hosting > freedit
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> |