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> |
