[javascript] MediumEditor에서 에디터 툴바 버튼에 목록 생성 기능 추가하기

30 Nov 2023

javascript

MediumEditor는 사용하기 쉬운 WYSIWYG(What-You-See-Is-What-You-Get) 에디터 라이브러리입니다. 이 라이브러리는 에디터 툴바를 통해 다양한 기능을 제공하며, 이 중에서도 목록 생성 기능을 추가하고 싶다면 다음과 같은 방법을 사용할 수 있습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 설치해야 합니다. npm을 이용하여 다음과 같이 설치할 수 있습니다.

npm install medium-editor

2. 에디터 초기화하기

MediumEditor를 사용하기 위해 에디터를 초기화해야 합니다. 다음과 같이 HTML 파일에 스크립트 태그를 추가하고, 에디터를 초기화할 요소를 선택하고 new MediumEditor()를 호출하여 에디터를 초기화합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.min.css">
  </head>
  <body>
    <div id="editor"></div>

    <script src="node_modules/medium-editor/dist/js/medium-editor.min.js"></script>
    <script>
      var editor = new MediumEditor('#editor');
    </script>
  </body>
</html>

3. 목록 생성 버튼 추가하기

에디터 툴바에 목록 생성 기능을 추가하기 위해 button 요소를 생성하고 이벤트를 처리해야 합니다. 다음과 같이 추가할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.min.css">
  </head>
  <body>
    <div id="editor"></div>

    <script src="node_modules/medium-editor/dist/js/medium-editor.min.js"></script>
    <script>
      var editor = new MediumEditor('#editor', {
        toolbar: {
          buttons: ['bold', 'italic', 'underline', 'unorderedlist', 'orderedlist']
        }
      });
    </script>
  </body>
</html>

위의 코드에서 'unorderedlist'와 'orderedlist'는 목록 생성 버튼을 나타냅니다. 이렇게 설정하면 에디터 툴바에 목록 생성 버튼이 추가됩니다.

4. 결과 확인하기

위의 코드를 실행하고 웹 페이지를 열면 MediumEditor가 초기화되고 에디터 툴바에 목록 생성 버튼이 추가된 것을 확인할 수 있습니다.

이제 에디터를 사용하여 텍스트를 입력하고, 목록 생성 버튼을 클릭하여 목록을 생성할 수 있습니다.