js

JS - 간단하고 심플한 위지윅 에디터

12월 09, 2022

간단하고 심플하게 작성된 위지윅 에디터입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  <link rel="stylesheet" href="style.css">
   <title>간단한 에디터 만들기</title>
 </head>
<body>
  <div class="toolbar">
    <a href="" data-command='h1'>H1</a>
    <a href="" data-command='h2'>H2</a>
    <a href="" data-command='h3'>H3</a>
    <a href="" data-command='p' style='margin-right: 8px;'>p</a>
    <a href="" data-command='bold'>
      <i class='fa fa-bold'></i>
    </a>
    <a href="" data-command='italic'>
      <i class='fa fa-italic'></i>
    </a>
    <a href="" data-command='underline'>
      <i class='fa fa-underline'></i>
    </a>
    <a href="" data-command='strikeThrough' style="margin-right: 8px;">
      <i class='fa fa-strikethrough'></i>
    </a>
    <a href="" data-command='justifyLeft'>
      <i class='fa fa-align-left'></i>
    </a>
    <a href="" data-command='justifyCenter'>
      <i class='fa fa-align-center'></i>
    </a>
    <a href="" data-command='justifyRight'>
      <i class='fa fa-align-right'></i>
    </a>
    <a href="" data-command='justifyFull' style="margin-right: 8px;">
      <i class='fa fa-align-justify'></i>
    </a>
  </div>
  <div class='editor' contenteditable="true">
    <h1>심플 에디터</h1>
    <p>간단한 작성</p>
  </div>

  <script>
  document.querySelectorAll('.toolbar a').forEach(aE1 => aE1.addEventListener('click', function (e) {
    e.preventDefault();
    const command = aE1.dataset.command;

    if(command == 'h1' || command == 'h2' || command == 'h3' || command == 'p') {
      document.execCommand('formatBlock', false, command);
    } else {
      document.execCommand(command);
    }
   }));
  </script>
</body>
</html>


Tag:

0 Comments

0 댓글