[javascript] MediumEditor에서 에디터 툴바 버튼 숨기고 보이기 효과 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 텍스트를 편집하기 위해 사용되는 훌륭한 WYSIWYG(What You See Is What You Get) 편집기입니다. 이 편집기는 많은 기능과 툴바 버튼을 제공하지만, 때로는 좀 더 사용자 정의된 편집 인터페이스가 필요할 수 있습니다. 이번 블로그 포스트에서는 MediumEditor에서 툴바 버튼을 숨기고 보이기 위한 효과를 추가하는 방법에 대해 알아보겠습니다.

MediumEditor 설치하기

MediumEditor를 사용하기 위해서는 먼저 MediumEditor 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 MediumEditor를 설치합니다.

npm install medium-editor

툴바 버튼 숨기기

MediumEditor에서 툴바 버튼을 숨기기 위해서는 toolbar 옵션을 사용하여 툴바 버튼의 목록을 설정합니다. 숨기고 싶은 버튼의 클래스를 제거하여 숨김 처리하는 방법을 사용할 수 있습니다.

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

// 숨기고 싶은 버튼의 클래스를 제거하여 숨김 처리
editor.options.toolbar.buttons.forEach(function(button) {
  var buttonElement = editor.getExtensionByName(button);
  if (buttonElement) {
    buttonElement.base.classList.remove('medium-editor-button');
  }
});

위의 코드에서는 예시로 ‘bold’, ‘italic’, ‘underline’, ‘strikethrough’, ‘heading’ 버튼을 숨기는 방법을 보여줍니다. 필요에 따라 buttons 배열에 원하는 버튼을 추가하거나 제거할 수 있습니다.

툴바 버튼 보이기

툴바 버튼을 다시 보이게 하려면, 숨겼던 버튼의 클래스를 추가하여 보이게 처리할 수 있습니다.

// 툴바 버튼 보이게 처리
editor.options.toolbar.buttons.forEach(function(button) {
  var buttonElement = editor.getExtensionByName(button);
  if (buttonElement) {
    buttonElement.base.classList.add('medium-editor-button');
  }
});

위의 코드에서는 이전에 숨겼던 ‘bold’, ‘italic’, ‘underline’, ‘strikethrough’, ‘heading’ 버튼을 다시 보이게 처리하는 방법을 보여줍니다.

마무리

MediumEditor에서 툴바 버튼을 숨기고 보이게 하는 방법에 대해 알아보았습니다. 이러한 기능을 사용하여 MediumEditor를 더 맞춤화된 편집 인터페이스로 개선할 수 있습니다. MediumEditor의 공식 문서를 참조하여 더 다양한 설정과 기능을 활용해보세요.

MediumEditor 공식 문서

이번 포스트가 도움이 되었기를 바랍니다. 감사합니다.

참고 문서

MediumEditor 공식 문서