MediumEditor는 사용자가 텍스트를 편집할 수 있는 다목적 WYSIWYG(What You See Is What You Get) 편집기입니다. 이 편집기에는 툴바를 사용하여 텍스트 스타일을 변경하거나 다양한 기능을 수행할 수 있습니다. 이번 글에서는 MediumEditor에서 툴바 버튼의 클릭 이벤트를 처리하는 방법을 알아보겠습니다.

툴바 버튼 추가하기

MediumEditor를 사용하기 위해서는 먼저 HTML 요소를 생성하고 해당 요소에 MediumEditor 인스턴스를 초기화해야 합니다. 툴바 버튼을 추가하려면 buttons 옵션을 사용하여 원하는 버튼을 지정해야 합니다.

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

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

위 코드에서는 툴바에 bold, italic, underline, strikethrough 버튼을 추가했습니다. 여기서는 이 버튼들의 클릭 이벤트를 처리하는 방법에 초점을 맞추고 있으므로, 버튼의 기능은 중요하지 않습니다. 원하는 버튼을 추가하고 싶다면 MediumEditor의 공식 문서를 참고하시기 바랍니다.

버튼 클릭 이벤트 처리하기

MediumEditor에서 툴바 버튼의 클릭 이벤트를 처리하려면 toolbar의 static 이벤트를 사용해야 합니다. static 이벤트는 툴바가 DOM에 삽입될 때 발생하는 이벤트로, 이벤트 핸들러를 등록하여 툴바에 있는 버튼들의 클릭 이벤트를 처리할 수 있습니다.

editor.subscribe('toolbar.static', function(event, toolbarElement) {
  toolbarElement.addEventListener('click', function(e) {
    const button = e.target.closest('button');
    if (button && button.dataset.action) {
      const action = button.dataset.action;
      switch (action) {
        case 'bold':
          document.execCommand('bold');
          break;
        case 'italic':
          document.execCommand('italic');
          break;
        case 'underline':
          document.execCommand('underline');
          break;
        case 'strikethrough':
          document.execCommand('strikeThrough');
          break;
      }
    }
  });
});

위 코드는 toolbar.static 이벤트 핸들러를 등록하고, 버튼 클릭 이벤트를 처리하는 로직을 구현한 예시입니다. 클릭 이벤트가 발생한 버튼의 dataset.action 속성을 확인하여 각 버튼의 동작을 구분하고, 해당 동작을 수행합니다. 위 코드는 각 버튼에 대한 동작을 임시로 document.execCommand()를 통해 수행하고 있습니다. 실제로는 해당 동작에 따라 편집기의 내용을 변경하거나 다른 로직을 수행하면 됩니다.

MediumEditor의 toolbar.static 이벤트를 사용하여 툴바 버튼의 클릭 이벤트를 처리할 수 있습니다. 이를 활용하여 원하는 기능을 추가하고 사용자의 텍스트 편집 경험을 향상시킬 수 있습니다.

참고 자료

• MediumEditor 공식 문서