MediumEditor는 사용자가 텍스트를 편집할 수 있는 강력한 웹 에디터 라이브러리입니다. 이 라이브러리는 다양한 기능을 제공하며, 에디터의 툴바를 통해 사용자가 텍스트를 스타일링하고 포맷팅할 수 있습니다. 그러나 때로는 모든 툴바 버튼을 사용하지 않아야 할 때가 있을 수 있습니다. 이번 글에서는 MediumEditor에서 에디터 툴바 버튼을 숨기는 방법에 대해 알아보겠습니다.

1. CSS를 통한 숨김 처리

가장 간단한 방법은 CSS를 사용하여 툴바 버튼을 숨기는 것입니다. 각 버튼에 대해 “display: none” 스타일을 적용하여 해당 버튼을 숨길 수 있습니다. 예를 들어, 글쓰기 버튼을 숨길 때는 다음과 같이 작성할 수 있습니다.

.medium-editor-toolbar .medium-editor-action-bold {
  display: none;
}

이와 같은 방법으로 필요한 버튼들을 모두 숨길 수 있습니다. 하지만 이 방법은 단순히 버튼을 화면에서 감추는 것이므로, 스크린리더 사용자나 접근성을 고려해야 하는 경우에는 다른 방법을 사용해야 합니다.

2. 옵션 설정을 통한 숨김 처리

MediumEditor는 에디터를 초기화할 때 옵션 설정을 통해 툴바 버튼을 제어할 수 있습니다. toolbar 옵션을 사용하면 원하는 버튼들만 포함된 툴바를 생성할 수 있습니다. 버튼들은 배열 형태로 전달되며, 각 버튼은 문자열 형태의 CSS 클래스명으로 지정됩니다. 이 옵션을 설정하여 필요한 버튼들만 보여주도록 할 수 있습니다. 예를 들어, bold와 italic 버튼만 표시하려면 다음과 같이 작성할 수 있습니다.

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

이와 같은 방법으로 필요한 버튼들을 지정하여 툴바를 생성할 수 있습니다.

마무리

MediumEditor에서 에디터 툴바 버튼을 숨기는 방법을 알아보았습니다. CSS를 통해 간단히 숨길 수도 있고, 옵션 설정을 통해 툴바를 제어할 수도 있습니다. 필요에 따라 사용자에게 적합한 방법을 선택하여 툴바를 관리할 수 있습니다.

참고 자료

• MediumEditor 공식 문서