MediumEditor는 사용자가 사용할 수 있는 다양한 툴바 옵션을 제공하는 인기있는 WYSIWYG 에디터 라이브러리입니다. 하지만 기본적으로 툴바에 표시되는 버튼들은 고정되어 있습니다. 이번 가이드에서는 MediumEditor에서 에디터 툴바에 있는 컨텐츠를 동적으로 변경하는 방법을 알아보겠습니다.

툴바 컨텐츠 변경하기

MediumEditor의 툴바에 있는 버튼들을 변경하기 위해서는 toolbar 옵션을 수정해야 합니다. toolbar는 버튼들을 배열 형태로 가지고 있으며, 각각의 버튼은 객체로 표현됩니다. 이 객체에는 버튼의 타입, 아이콘 및 동작 등에 대한 정보가 담겨있습니다.

먼저 MediumEditor 인스턴스를 생성하고 툴바에 보여질 버튼들을 정의해야 합니다. 아래의 예시 코드를 참고해주세요.

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

위의 예시에서는 buttons 배열에 원하는 버튼들을 나열하였습니다. 버튼 타입에는 다양한 옵션이 있으며, 자세한 내용은 MediumEditor의 공식 문서를 참고해주세요.

툴바 컨텐츠를 동적으로 변경하기 위해서는 update 메소드를 사용하면 됩니다. 아래의 예시 코드에서는 버튼을 클릭했을 때 툴바에 새로운 버튼들이 보여지도록 설정합니다.

// 버튼 클릭 이벤트 핸들러
function changeToolbar() {
    editor.update({
        toolbar: {
            buttons: [
                'bold',
                'italic',
                'underline',
                'anchor',
                'h4',
                'h5',
                'h6'
            ]
        }
    });
}

위의 코드에서는 changeToolbar 함수를 만들어서 버튼 클릭 이벤트에 연결시켜줍니다. 클릭 이벤트가 발생하면 editor.update 메소드를 사용하여 툴바 버튼을 업데이트합니다.

결론

MediumEditor에서 에디터 툴바 컨텐츠를 동적으로 변경하는 방법에 대해 알아보았습니다. 이를 통해 사용자가 원하는 버튼들을 툴바에 추가하거나 제거할 수 있습니다. MediumEditor의 다양한 옵션을 활용하여 에디터를 원하는 대로 커스터마이징할 수 있습니다.

더 자세한 내용은 MediumEditer 공식 문서를 참고해주세요.