solidity #1 솔리디티의 데이터 타입-1
2018-05-30
WYSIWYG 에디터를 간단하게 만들어봅니다
2018-03-26
Explanation
간단하게 만들어보는 WYSIWYG(What You See Is What You Get) 에디터
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>WYSIWYG Editor</title> <script> let textArea; function iframeLoad() { textArea = document.getElementById('WYSIWYG').contentWindow.document; textArea.write(` <!DOCTYPE html> <html> <body>hello world</body> </html> `); textArea.designMode = 'on'; } function editCommand(command) { textArea.execCommand(command, false); } </script> </head> <body> <nav> <h1>Option</h1> <span>style : </span> <button onclick="editCommand('bold')">Bold</button> <button onclick="editCommand('italic')">Italic</button> <span> </span> <span>justify : <span> <button onclick="editCommand('justifyLeft')">Left</button> <button onclick="editCommand('justifyCenter')">Center</button> <button onclick="editCommand('justifyRight')">Right</button> </nav> <section> <h2>WYSIWYG Editor</h2> <iframe onload="iframeLoad()" id="WYSIWYG"></iframe> </section> </body> </html> |
그밖의 execCommand 속성들
https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand
