MediumEditor는 JavaScript로 작성된 WYSIWYG(What-You-See-Is-What-You-Get) 에디터입니다. 이 에디터를 사용하면 편리하게 텍스트 편집을 할 수 있습니다. 이번 글에서는 MediumEditor의 툴바에 있는 아이콘을 변경하는 방법에 대해 알아보겠습니다.

필요한 준비물

이 예제를 따라하기 위해 다음의 파일들을 다운로드 받아주세요.

1. MediumEditor: 공식 Github 저장소
2. FontAwesome: 공식 웹사이트에서 다운로드

아이콘 변경하기

1. 다운로드한 MediumEditor 파일을 프로젝트에 추가합니다.
2. 다운로드한 FontAwesome 패키지에서 원하는 아이콘을 찾아 css 폴더 안에 있는 all.css 파일을 프로젝트에 추가합니다.

<link rel="stylesheet" href="path/to/fontawesome/css/all.css">

1. HTML 파일에서 MediumEditor를 초기화하는 코드를 작성해줍니다.

<div id="my-editor" contenteditable="true"></div>

<script src="path/to/medium-editor.js"></script>
<script src="path/to/medium-editor-custom-icons.js"></script>

<script>
  var editor = new MediumEditor('#my-editor', {
    toolbar: {
      buttons: ['bold', 'italic', 'underline', 'customIcon']
    },
    buttonLabels: 'fontawesome',
    extensions: {
      'customIcon': new MediumEditor.extension.CustomIcon({
        iconClass: 'fas fa-star'
      })
    }
  });
</script>

1. buttons 배열에 원하는 툴바 아이콘을 추가합니다. 사용 가능한 아이콘 이름은 FontAwesome에서 제공하는 클래스 이름을 사용합니다.
2. buttonLabels 옵션을 fontawesome로 설정하면 MediumEditor에서 기본 제공하는 아이콘 대신 FontAwesome 아이콘을 사용할 수 있습니다.
3. extensions 객체에 customIcon을 추가합니다. iconClass 옵션을 통해 FontAwesome에서 지정한 클래스 이름을 입력하면 해당 아이콘이 툴바에 표시됩니다.

이제 위의 코드를 실행하면 MediumEditor의 툴바에 원하는 아이콘이 표시됩니다. 이러한 방법을 통해 MediumEditor의 툴바 아이콘을 자유롭게 변경할 수 있습니다.

결론

MediumEditor에서 툴바 아이콘을 변경하는 방법을 알아보았습니다. 위의 예제를 따라하면 MediumEditor를 보다 개인화된 에디터로 사용할 수 있습니다.