[javascript] MediumEditor에서 다중 에디터 사용하기

30 Nov 2023

javascript

MediumEditor는 사용자 친화적인 UI를 제공하는 Javascript 기반의 텍스트 에디터 라이브러리입니다. 이 라이브러리는 다양한 기능과 옵션을 제공하여 사용자가 커스터마이징할 수 있습니다. 이번에는 MediumEditor를 사용하여 한 페이지에 다중 에디터를 사용하는 방법에 대해 알아보겠습니다.

1. MediumEditor 설치

MediumEditor를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음의 명령어를 사용하여 npm을 통해 MediumEditor를 설치합니다.

npm install medium-editor

2. HTML 준비

다중 에디터를 사용하기 위해 HTML 파일을 준비합니다. 각각의 에디터를 구분할 수 있는 고유한 id값을 지정해야 합니다. 예를 들어, 다음과 같은 형태의 HTML을 작성할 수 있습니다.

<div id="editor1"></div>
<div id="editor2"></div>

3. Javascript로 다중 에디터 초기화

Javascript 파일에서 다중 에디터를 초기화합니다. 각각의 에디터에 대한 초기화를 수행하고, 옵션을 설정하며, 이벤트 리스너를 추가할 수 있습니다. 예를 들어, 다음과 같은 코드를 사용하여 에디터를 초기화할 수 있습니다.

var editor1 = new MediumEditor('#editor1', {
    // 에디터 옵션 설정
});

var editor2 = new MediumEditor('#editor2', {
    // 에디터 옵션 설정
});

// 이벤트 리스너 추가
editor1.subscribe('editableInput', function() {
    // 에디터 내용이 변경되었을 때 수행할 동작
});

editor2.subscribe('editableInput', function() {
    // 에디터 내용이 변경되었을 때 수행할 동작
});

4. CSS 스타일 설정

다중 에디터 사용 시 각각의 에디터를 구분하기 위해 CSS 스타일을 설정해야 합니다. 예를 들어, 다음과 같이 스타일을 지정할 수 있습니다.

#editor1 {
    /* 에디터1에 대한 스타일 설정 */
}

#editor2 {
    /* 에디터2에 대한 스타일 설정 */
}

5. 다중 에디터 사용하기

이제 준비된 HTML과 Javascript를 통해 다중 에디터를 사용할 수 있습니다. 각각의 에디터는 독립적으로 동작하며, 별도의 옵션 설정과 이벤트 리스너를 적용할 수 있습니다.

var editor1 = new MediumEditor('#editor1', {
    // 에디터 옵션 설정
});

var editor2 = new MediumEditor('#editor2', {
    // 에디터 옵션 설정
});

// 각각의 에디터 동작
editor1.setContent('첫 번째 에디터의 내용');
editor2.setContent('두 번째 에디터의 내용');

위의 코드를 실행하면 각각의 에디터에 대한 초기 내용이 설정되며, 사용자는 각각의 에디터에서 별도의 텍스트를 입력하거나 편집할 수 있습니다.

이렇게 MediumEditor를 사용하여 한 페이지에 다중 에디터를 구성하는 방법에 대해 알아보았습니다. MediumEditor는 사용하기 쉬운 API와 유연한 확장성을 제공하므로, 다중 에디터를 구현하는데 효과적으로 사용될 수 있습니다.

참고 자료

MediumEditor 공식 문서