[javascript] MediumEditor에서 에디터 툴바에 에디터 상태 표시하기

30 Nov 2023

javascript

MediumEditor는 사용하기 쉬운 WYSIWYG 에디터이지만, 때로는 사용자에게 현재 에디터 상태를 시각적으로 표시하는 것이 유용할 수 있습니다. 에디터 상태란 텍스트 스타일 (굵게, 이탤릭체 등)이나 텍스트 포맷 (글머리 기호, 번호 등)와 같은 기능을 의미합니다.

이번 글에서는 MediumEditor에서 에디터 툴바에 현재 에디터 상태를 표시하는 방법에 대해 설명하겠습니다.

먼저, MediumEditor를 사용하기 위해 HTML 문서에 MediumEditor를 불러옵니다. 아래는 CDN을 통해 MediumEditor를 불러오는 예시입니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>

다음으로, 에디터를 초기화하는 JavaScript 코드를 작성합니다.

var editor = new MediumEditor('.editable');

위 코드에서 .editable은 에디터로 사용할 HTML 요소의 클래스 이름입니다. 이 클래스가 지정된 요소들이 에디터로 사용될 수 있습니다.

에디터 상태 표시하기

에디터 상태를 표시하기 위해서는 MediumEditor의 bindToElements() 메서드와 tracker 옵션을 사용합니다. bindToElements() 메서드는 에디터와 연결할 요소를 지정하고, tracker 옵션은 에디터 상태 변경을 감지하여 처리하는 함수를 지정합니다.

editor.subscribe('editableInput', function (event, editable) {
  showEditorState(editable); // 에디터 상태 표시 함수 호출
});

function showEditorState(editable) {
  var editorState = editable.getAttribute('data-medium-editor-element'); // 에디터 상태 가져오기
  // 에디터 상태에 따라 툴바에 표시할 아이콘 추가/제거
  // 예를 들어, 볼드체 상태일 경우 'bold' 아이콘을 추가하고, 아닐 경우 제거
  if (editorState === 'bold') {
    editor.getExtensionByName('toolbar').setToolbarButtonActive('bold');
  } else {
    editor.getExtensionByName('toolbar').setToolbarButtonInactive('bold');
  }
  // 이외에 필요한 에디터 상태에 따른 툴바 아이콘 처리를 추가할 수 있습니다.
}

위 코드에서 editableInput 이벤트를 구독하여 에디터 상태의 변화를 감지하고, showEditorState() 함수를 호출하여 에디터 상태를 표시합니다. 이 함수에서는 getAttribute()을 사용하여 현재 에디터 상태를 가져옵니다. 그리고 이에 따라 툴바에 표시할 아이콘을 추가 또는 제거하여 현재 에디터 상태를 시각적으로 표시합니다.

이와 같이 MediumEditor에는 다양한 이벤트와 옵션을 활용하여 에디터 툴바에 에디터 상태를 표시할 수 있습니다.

마치며

MediumEditor를 사용하는 웹 프로젝트에서 사용자에게 에디터 상태를 시각적으로 표시하는 것은 사용자 경험을 향상시키는데 도움이 됩니다. 이 글에서는 MediumEditor 툴바에 에디터 상태를 표시하는 방법을 소개했습니다. 이를 응용하여 자신의 프로젝트에 맞게 에디터 상태 표시 기능을 개발해보세요.

참고 자료:

MediumEditor Toolbar 사용하기

에디터 상태 표시하기

마치며