MediumEditor는 사용자 친화적인 텍스트 편집기로 많은 웹 개발자들에게 사랑받고 있는 도구입니다. 이 편집기를 사용하면 사용자들이 간편하게 웹 페이지의 텍스트를 편집하고 포맷팅할 수 있습니다. 이번에는 MediumEditor에서 에디터를 축소하는 기능에 대해 알아보겠습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 설치해야 합니다. NPM을 사용하신다면 다음 명령어를 사용하십시오:

npm install medium-editor

이후에는 HTML 문서에 MediumEditor의 CSS와 JavaScript 파일을 추가하세요:

<link href="medium-editor.css" rel="stylesheet"/>
<script src="medium-editor.js"></script>

2. 에디터 축소 버튼 추가하기

MediumEditor는 여러 옵션을 제공하여 커스터마이징할 수 있는데, 그 중에서 에디터 축소 버튼을 추가하는 방법을 알아보겠습니다. 에디터를 초기화할 때 아래와 같이 추가 옵션을 설정하여 버튼을 활성화할 수 있습니다:

var editor = new MediumEditor('.editable', {
    // 기본 옵션...
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'anchor', 'quote'],
        static: true,
        sticky: true,
        updateOnEmptySelection: true
    },
    extensions: {
        'collapse': new MediumEditor.extensions.collapseButton()
    }
});

toolbar 속성에서 buttons 배열에 ‘collapse’를 추가하여 버튼을 활성화하고, extensions 속성에 collapseButton을 등록합니다. ‘collapse’ 버튼은 에디터를 축소하는 기능을 담당합니다.

3. 에디터 축소 기능 사용하기

이제 ‘collapse’ 버튼이 추가된 MediumEditor를 사용하여 에디터를 축소하는 기능을 사용할 수 있습니다. ‘collapse’ 버튼을 클릭하면 에디터의 높이가 축소되고, 텍스트 편집 기능이 일시적으로 비활성화됩니다. 다시 ‘expand’ 버튼을 클릭하면 에디터가 원래대로 돌아옵니다.

아래는 ‘collapse’ 버튼이 추가된 MediumEditor 사용 예시입니다:

<div class="editable" contenteditable="true"></div>

위와 같이 contenteditable 속성을 이용하여 편집 가능한 영역을 만들고, 해당 영역에 editable 클래스를 추가하세요.

결론

MediumEditor에서 제공하는 ‘collapse’ 버튼을 사용하여 에디터를 축소하는 기능을 쉽게 구현할 수 있습니다. 사용자들은 텍스트 편집을 원할 때 에디터를 확장하고, 필요하지 않을 때는 축소하여 공간을 절약할 수 있습니다.