간단하게 만들어보는 WYSIWYG(What You See Is What You Get) 에디터

Code

<!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>&nbsp;&nbsp;&nbsp;</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