[javascript] MediumEditor에서 에디터 툴바에 새로운 버튼 추가하기

30 Nov 2023

javascript

MediumEditor는 JavaScript로 작성된 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 에디터를 사용하면 사용자들이 텍스트를 편집하고 서식을 지정할 수 있습니다. 그러나 기본적으로 제공되는 툴바에는 특정 기능을 수행하는 버튼이 부족할 수도 있습니다. 이 경우 툴바에 새로운 버튼을 추가할 수 있습니다.

다음은 MediumEditor 툴바에 새로운 버튼을 추가하는 과정입니다.

1. MediumEditor 라이브러리 추가하기

먼저, MediumEditor 라이브러리를 HTML 페이지에 추가해야 합니다. 아래의 스크립트 태그를 사용하여 MediumEditor 라이브러리를 로드할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.css">

2. 커스텀 버튼 추가하기

새로운 버튼을 툴바에 추가하려면 MediumEditor 생성자에서 버튼을 정의해야 합니다. 아래의 예제 코드에서는 ‘customButton’이라는 CSS 클래스를 가진 버튼을 툴바에 추가하는 방법을 보여줍니다.

var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'customButton']
    }
});

editor.addButton('customButton', { label: 'Custom', contentDefault: '<b>C</b>', action: function() {
    // 커스텀 버튼의 동작을 여기에 추가합니다.
}});

위의 예제에서는 buttons 배열에 ‘customButton’을 추가하여 버튼을 툴바에 표시합니다. 커스텀 버튼의 레이블은 ‘Custom’으로 설정되며, contentDefault 속성을 사용하여 버튼 내용을 지정할 수 있습니다. action 함수에는 버튼을 클릭했을 때 실행할 동작을 정의할 수 있습니다.

3. 커스텀 버튼 동작 추가하기

action 함수 내에 커스텀 버튼의 동작을 추가해야 합니다. 이 함수는 버튼을 클릭했을 때 실행되며, 에디터의 컨텐츠를 조작하거나 기타 원하는 작업을 수행할 수 있습니다.

아래의 예제 코드는 커스텀 버튼을 클릭했을 때 선택된 텍스트를 대문자로 변환하는 예입니다.

editor.addButton('customButton', { label: 'Custom', contentDefault: '<b>C</b>', action: function() {
    var selectedText = editor.getSelectedParentElement().innerText;
    var uppercaseText = selectedText.toUpperCase();
    editor.insertHTML(uppercaseText);
}});

위의 예제에서 action 함수 내에서는 선택된 텍스트를 가져와 대문자로 변환한 다음 insertHTML 메서드를 사용하여 대문자 텍스트를 에디터에 삽입합니다.

결론

MediumEditor에서 에디터 툴바에 새로운 버튼을 추가하는 방법을 알아보았습니다. 이를 통해 사용자 정의 기능을 추가하거나 편집 작업을 더욱 효율적으로 수행할 수 있습니다. MediumEditor의 다양한 기능과 API를 사용하여 원하는 대로 커스터마이징할 수 있습니다.

참고: