[javascript] MediumEditor에서 목록(리스트) 생성하기

30 Nov 2023

javascript

MediumEditor는 사용자가 텍스트를 편집할 수 있는 강력한 WYSIWYG 편집기입니다. 이 편집기를 사용하여 목록을 생성하는 방법을 알아보겠습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 사용하기 위해 npm을 통해 패키지를 설치해야합니다. 다음 명령어를 사용하여 MediumEditor를 설치합니다.

npm install medium-editor --save

2. HTML 페이지에 MediumEditor 추가하기

MediumEditor를 사용하는 HTML 페이지에서 스타일과 스크립트를 로드해야 합니다. 다음과 같이 HTML에 스타일과 스크립트를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" integrity="sha512-Mt2FvVlS2Gv6n3UBbeyivC/Vjsw68gaAD2IN3LpIk60fkXmlmOAcwYJr3zQRJvybnNsIre7H5h6nMsX3k6GbTQ==" crossorigin="anonymous" />
  </head>
  <body>
    <div id="editor" contenteditable="true"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js" integrity="sha512-oxZegjKU96r90t9sSjZu8XTXm/7rw164Y0ZQ/HOn8gQp8PStVCJlBnSqWEf1Q2EZUIf0LaLaoJzD6W6SHx1mvA==" crossorigin="anonymous"></script>
    <script>
        const editor = new MediumEditor('#editor');
    </script>
  </body>
</html>

3. 목록(리스트) 생성하기

MediumEditor를 사용하여 목록을 생성하려면 list 버튼을 클릭하면 됩니다. 기본적으로 MediumEditor는 <p> 태그로 텍스트를 감싸고 있지만, 목록을 생성하면 <ul> 태그로 감싸게 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" integrity="sha512-Mt2FvVlS2Gv6n3UBbeyivC/Vjsw68gaAD2IN3LpIk60fkXmlmOAcwYJr3zQRJvybnNsIre7H5h6nMsX3k6GbTQ==" crossorigin="anonymous" />
  </head>
  <body>
    <div id="editor" contenteditable="true"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js" integrity="sha512-oxZegjKU96r90t9sSjZu8XTXm/7rw164Y0ZQ/HOn8gQp8PStVCJlBnSqWEf1Q2EZUIf0LaLaoJzD6W6SHx1mvA==" crossorigin="anonymous"></script>
    <script>
        const editor = new MediumEditor('#editor', {
            toolbar: {
                buttons: ['list']
            }
        });
    </script>
  </body>
</html>

편집기에 커서를 둔 후 list 버튼을 클릭하면 목록이 생성됩니다.

이렇게 MediumEditor를 사용하여 HTML 페이지에서 목록(리스트)를 생성할 수 있습니다. 자세한 내용은 MediumEditor 공식 문서를 참조하세요.