MediumEditor는 HTML 텍스트 편집기 라이브러리로, 실시간으로 텍스트를 편집하거나 서식을 적용할 수 있는 강력한 기능을 제공합니다. MediumEditor는 기본적으로 일련의 툴바 버튼을 제공하지만, 이 툴바를 사용자 정의하여 커스터마이징할 수도 있습니다.

툴바 커스터마이징 방법

MediumEditor의 툴바를 커스터마이징하기 위해서는 다음 단계를 따르면 됩니다.

1. MediumEditor 라이브러리를 HTML에 추가합니다.
2. 커스텀 CSS를 사용하여 툴바 스타일을 변경합니다.
3. 툴바 옵션을 설정하여 원하는 버튼을 추가 또는 제거합니다.

1. MediumEditor 라이브러리 추가

MediumEditor를 사용하기 위해서는 CDN을 통해 해당 라이브러리를 HTML 파일에 추가해야 합니다. 다음은 MediumEditor의 CDN 링크입니다.

<script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">

2. 툴바 스타일 변경하기

MediumEditor의 툴바 스타일을 커스터마이징하기 위해서는 CSS를 사용합니다. 원하는 스타일을 설정하여 툴바를 디자인할 수 있습니다. 예를 들어, 툴바의 배경색을 변경하고 싶다면 다음과 같이 CSS를 작성할 수 있습니다.

.medium-editor-toolbar {
  background-color: #f2f2f2;
}

3. 툴바 옵션 설정하기

MediumEditor의 툴바를 커스터마이징하기 위해서는 툴바 옵션을 설정해야 합니다. 툴바 옵션을 사용하여 툴바에 원하는 버튼을 추가하거나 제거할 수 있습니다. 예를 들어, 툴바에 Bold와 Italic 버튼을 추가하고 싶다면 다음과 같이 옵션을 설정할 수 있습니다.

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

위 코드에서 .editable 클래스는 텍스트 편집기가 적용될 엘리먼트의 선택자입니다. 따라서 해당 선택자를 원하는 곳에 적용하여 편집기를 사용할 수 있습니다.

MediumEditor에서 제공하는 버튼 목록은 공식 문서를 참조해주세요.

결론

MediumEditor의 툴바를 커스터마이징하는 방법을 알아보았습니다. 원하는 스타일로 툴바를 디자인하고 원하는 기능의 버튼을 추가함으로써, 더 유연하고 맞춤화된 편집 환경을 구축할 수 있습니다.