MediumEditor는 웹 페이지 내에서 텍스트 편집을 위한 Javascript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 쉽게 텍스트를 편집하고 서식을 적용할 수 있습니다.

하지만 기본적으로 제공되는 버튼 이외에 사용자 정의 버튼을 추가하고 싶은 경우가 있을 수 있습니다. 이번 글에서는 MediumEditor에서 사용자 정의 버튼을 추가하는 방법에 대해 알아보겠습니다.

MediumEditor 커스텀 버튼 추가하기

1. MediumEditor를 초기화할 때, toolbar 배열에 추가할 사용자 정의 버튼을 선언합니다. 이 버튼에는 name, action 등의 속성을 설정해줄 수 있습니다.

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

1. CustomButtonExtension 클래스를 만들어 사용자 정의 버튼의 동작을 정의합니다.

function CustomButtonExtension() {
    this.name = 'customButton';
    this.action = function() {
        alert('Custom Button Clicked');
    };
    this.html = '<button class="medium-editor-button">Custom</button>';
}

위 예제에서는 사용자 정의 버튼을 클릭하면 ‘Custom Button Clicked’라는 알림을 보여주도록 설정되어 있습니다. 원하는 동작으로 변경하면 됩니다.

1. 사용자 정의 버튼을 나타내기 위해 CustomButtonExtension 클래스에서 html 속성에 버튼 요소를 정의합니다.

2. CSS 스타일을 이용하여 버튼을 디자인할 수 있습니다.

결론

MediumEditor에서 사용자 정의 버튼을 추가하는 방법에 대해 알아보았습니다. 위의 예제 코드를 참고하여 MediumEditor에 원하는 버튼을 추가하고, 필요한 동작을 구현해보세요.