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