[javascript] MediumEditor에서 텍스트 들여쓰기 설정하기

30 Nov 2023

javascript

개요

MediumEditor는 웹 기반의 WYSIWYG(What You See Is What You Get) 에디터로써, 텍스트를 손쉽게 편집할 수 있는 기능을 제공합니다. 이번 글에서는 MediumEditor에서 텍스트를 들여쓰기하는 기능을 설정하는 방법에 대해 알아보겠습니다.

설정 방법

MediumEditor에서 텍스트 들여쓰기를 설정하기 위해서는 다음과 같이 몇 가지 단계를 거쳐야 합니다.

1. MediumEditor 라이브러리 추가

먼저, MediumEditor를 사용하기 위해 해당 라이브러리를 HTML 문서에 추가해야 합니다. 아래의 코드를 <head> 또는 <body> 태그 내에 추가해주세요.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>

2. MediumEditor 인스턴스 생성

MediumEditor를 사용하기 위해 인스턴스를 생성해야 합니다. 아래의 코드를 <script> 태그 내에 추가해주세요.

var editor = new MediumEditor('.editable');

위의 코드에서 ‘.editable’은 편집 가능한 영역의 CSS 클래스 이름입니다. 해당 클래스 이름을 자신의 HTML 구조에 맞게 수정해주세요.

3. 들여쓰기 버튼 추가

이제 들여쓰기 버튼을 툴바에 추가해야 합니다. MediumEditor는 기본적으로 여러 가지 기능을 제공하는 툴바를 제공하므로, 해당 툴바에 들여쓰기 버튼을 추가해야 합니다. 아래의 코드를 <script> 태그 내에 추가해주세요.

editor.addButton('indent', {
  label: '<i class="fa fa-indent"></i>',
  action: 'indent',
  aria: 'Indent Text',
  tagNames: ['p']
});

위의 코드에서 ‘fa fa-indent’는 들여쓰기 아이콘의 CSS 클래스 이름입니다. 필요에 따라 자신이 원하는 아이콘 클래스 이름으로 바꿔 사용할 수 있습니다.

4. 들여쓰기 기능 체크

이제 위의 단계를 모두 완료했으면, MediumEditor에서 텍스트를 들여쓰기할 수 있는지 확인해볼 차례입니다. 해당 기능을 테스트하기 위해 편집 가능한 영역을 마우스로 클릭한 후, 들여쓰기 버튼을 눌러보세요. 텍스트가 들여쓰기되는 것을 확인할 수 있을 것입니다.

이상으로 MediumEditor에서 텍스트를 들여쓰기하는 방법에 대해 알아보았습니다. MediumEditor의 다양한 기능을 활용하여 보다 효율적인 텍스트 편집 환경을 구성할 수 있습니다.