MediumEditor는 사용하기 쉬운 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 에디터를 사용하여 텍스트를 작성하고 편집할 수 있습니다. 그러나 기본적으로 텍스트 정렬 기능이 제공되지 않으므로, 툴바에 정렬 버튼을 추가하는 방법을 소개하겠습니다.

1. MediumEditor 설치 및 설정

먼저, MediumEditor를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 MediumEditor를 설치합니다:

npm install medium-editor

설치가 완료되면 HTML 파일에 다음과 같이 MediumEditor 스크립트를 추가합니다:

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

2. 텍스트 정렬 버튼 추가하기

MediumEditor에 텍스트 정렬 버튼을 추가하려면 다음 단계를 따르세요:

1. 컨테이너 역할을 할 <div> 요소를 HTML 파일에 추가합니다.

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

1. JavaScript 파일에 다음 코드를 작성하여 MediumEditor를 초기화합니다.

var editor = new MediumEditor('#editor', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor', 'justifyCenter', 'justifyRight', 'justifyFull']
  }
});

위 코드에서 buttons 배열에 justifyCenter, justifyRight, justifyFull 버튼을 추가하여 텍스트 정렬 기능을 활성화합니다.

1. 웹 페이지에서 MediumEditor를 실행하여 결과를 확인합니다.

3. 옵션 추가하기

MediumEditor에서는 다양한 옵션을 제공합니다. 예를 들어, 기본 정렬 버튼을 사용하지 않고 사용자 정의 버튼을 추가하려면 다음과 같이 옵션을 설정할 수 있습니다:

var editor = new MediumEditor('#editor', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor', 'customButton'],
    static: true,
    sticky: true,
    align: 'center',
    updateOnEmptySelection: true
  },
  extensions: {
    'customButton': new CustomButton()
  }
});

function CustomButton() {
  this.name = 'customButton';
  this.action = function() {
    // 사용자 정의 버튼 동작 추가
  };
  this.getButton = function() {
    var button = document.createElement('button');
    button.classList.add('medium-editor-action');
    button.textContent = 'Custom';
    return button;
  };
}

위 코드에서 toolbar 객체에 static을 true로 설정하여 툴바를 페이지 상단에 고정하고, sticky를 true로 설정하여 스크롤할 때 툴바가 항상 보이도록 합니다. 또한, 사용자 정의 버튼을 추가하기 위해 extensions 객체에 customButton을 등록하고, 해당 버튼의 동작과 모양을 정의하는 코드를 작성합니다.

MediumEditor의 옵션과 확장 기능에 대한 더 자세한 내용은 공식 문서를 참조하십시오.

MediumEditor를 사용하여 에디터 툴바 버튼에 텍스트 정렬 기능을 추가하는 방법을 알아보았습니다. 이제 여러분은 MediumEditor를 사용하여 텍스트를 손쉽게 편집할 수 있습니다. 출처: MediumEditor 공식 문서.