[javascript] MediumEditor에서 에디터 툴바 확장 토글 버튼 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자에게 편리한 에디팅 환경을 제공하는 WYSIWYG(What You See Is What You Get) 에디터 라이브러리입니다. 기본적으로 여러 가지 편집 옵션을 제공하지만, 때로는 특정 기능을 더 추가하고 싶을 수 있습니다.

이번 글에서는 MediumEditor에서 에디터 툴바에 확장 토글 버튼을 추가하는 방법을 알아보겠습니다.

1. MediumEditor 세팅하기

먼저, MediumEditor를 적용할 HTML 페이지를 준비합니다. 필요한 스타일시트와 스크립트 파일을 로드해주세요.

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

다음으로, 텍스트 에디터를 적용하고 싶은 엘리먼트를 선택합니다.

<div id="editor"></div>

2. 토글 버튼 추가하기

에디터를 초기화할 때, 토글 버튼을 추가할 수 있습니다. 이 버튼은 특정 기능을 활성화 또는 비활성화하는 역할을 합니다.

var editor = new MediumEditor('#editor', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'strikethrough', 'toggle']
    }
});

editor.subscribe('toggle', function (event, editable) {
    // 토글 버튼의 동작을 정의합니다.
    // 활성화 또는 비활성화되었을 때 수행할 작업을 추가해주세요.
});

위 코드에서 buttons 배열에 toggle을 추가하여 토글 버튼을 툴바에 포함시켰습니다. 그리고 editor.subscribe() 함수를 사용하여 토글 버튼의 동작을 정의할 수 있습니다. 해당 함수의 콜백 함수에는 토글 버튼의 상태 변화에 따른 작업을 추가하면 됩니다.

예를 들어, 볼드(Bold) 스타일을 토글하는 버튼을 추가하고 싶다면, 다음과 같이 작성할 수 있습니다.

editor.subscribe('toggle', function (event, editable) {
    if (event.target.classList.contains('medium-editor-action-bold')) {
        editor.toggleBold();
    }
});

위 코드에서 medium-editor-action-bold 클래스를 포함하는 엘리먼트를 클릭했을 때, editor.toggleBold() 함수를 호출하여 볼드 스타일을 토글합니다.

마치며

MediumEditor에서 에디터 툴바에 토글 버튼을 추가하는 방법에 대해 알아보았습니다. 이와 같은 방식으로 다른 기능을 추가할 수도 있으니 참고해보세요. MediumEditor 공식 문서를 확인하면 더 많은 사용 가능한 옵션을 찾을 수 있습니다.

MediumEditor 공식 문서

Happy coding!