MediumEditor는 사용자가 텍스트를 입력하고 편집할 수 있는 간편한 온라인 텍스트 편집기입니다. 이 편집기를 사용할 때 특정 이벤트가 발생했을 때 원하는 작업을 수행하려면 에디터에 이벤트 리스너를 추가해야 합니다.

JavaScript를 사용하여 MediumEditor에 이벤트 리스너를 추가하는 방법을 알아보겠습니다.

1. MediumEditor 설치하기

먼저, MediumEditor를 사용하기 위해 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음 명령어를 사용하여 MediumEditor를 설치합니다.

npm install medium-editor

2. 에디터 생성하기

MediumEditor를 사용하기 위해 HTML 파일에 에디터를 생성해야 합니다. 다음과 같이 <div> 요소를 사용하여 에디터를 생성합니다.

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

3. 이벤트 리스너 추가하기

JavaScript 코드에서 MediumEditor에 이벤트 리스너를 추가합니다. 다음은 editableInput 이벤트가 발생했을 때 콘솔에 메시지를 출력하는 예입니다.

const editor = new MediumEditor('#editor');

editor.subscribe('editableInput', function (event, editable) {
  console.log('에디터 내용이 변경되었습니다.');
});

editableInput은 에디터 내부의 텍스트가 변경될 때 발생하는 이벤트입니다. 이벤트 핸들러에서는 원하는 작업을 수행할 수 있습니다. 위 예제에서는 간단하게 콘솔에 메시지를 출력하도록 설정하였습니다.

4. 이벤트 종류

MediumEditor에서 사용할 수 있는 다양한 이벤트들이 있습니다. 이벤트 종류와 설명은 MediumEditor 공식 문서에서 확인할 수 있습니다.

결론

MediumEditor에 이벤트 리스너를 추가하여 원하는 작업을 수행할 수 있습니다. 위의 예제 코드를 참고하여 필요한 작업을 구현해보세요.