MediumEditor는 HTML과 CSS로 구성된 WYSIWYG(What You See Is What You Get) 에디터 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 텍스트를 편집할 수 있는 기능을 쉽게 구현할 수 있습니다. 그러나 기본적으로 MediumEditor에는 Undo(실행취소)와 Redo(다시실행) 기능이 내장되어 있지 않습니다. 이번 글에서는 MediumEditor에서 Undo/Redo 기능을 간단하게 추가하는 방법에 대해 알아보겠습니다.

MediumEditor 설치 및 설정

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

npm install medium-editor --save

설치가 완료되었으면, HTML 파일에서 MediumEditor의 스타일시트와 스크립트를 가져와야 합니다.

<link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.min.css">
<script src="node_modules/medium-editor/dist/js/medium-editor.min.js"></script>

이제 MediumEditor를 사용할 준비가 되었습니다.

Undo/Redo 버튼 추가하기

Undo/Redo 기능을 추가하기 위해 ‘Undo’와 ‘Redo’ 버튼을 HTML 파일에 추가해야 합니다.

<button id="undoButton">Undo</button>
<button id="redoButton">Redo</button>

이제 JavaScript 코드에서 Undo/Redo 기능을 구현해보겠습니다.

// MediumEditor 인스턴스 생성
var editor = new MediumEditor('.editable');

// Undo 버튼 클릭 이벤트 핸들러
document.getElementById('undoButton').addEventListener('click', function () {
    editor.undo();
});

// Redo 버튼 클릭 이벤트 핸들러
document.getElementById('redoButton').addEventListener('click', function () {
    editor.redo();
});

위의 코드에서 editable 클래스를 가진 요소에 MediumEditor 인스턴스를 생성하고, Undo/Redo 버튼의 클릭 이벤트 핸들러를 등록합니다. Undo 버튼을 클릭하면 editor.undo() 함수가 호출되고, Redo 버튼을 클릭하면 editor.redo() 함수가 호출됩니다.

실행 결과 확인하기

이제 HTML 파일을 웹 브라우저에서 열고 Undo/Redo 버튼을 클릭해보세요. 텍스트를 편집한 후 Undo 버튼을 클릭하면 이전에 편집한 내용으로 되돌아갈 수 있고, Redo 버튼을 클릭하면 다시 편집한 내용으로 되돌릴 수 있습니다.

MediumEditor에서 Undo/Redo 기능을 추가하는 방법에 대해 알아보았습니다. 기본 기능 이외에도 MediumEditor는 다양한 기능을 제공하므로 필요한 기능을 추가해보세요. 더 자세한 내용은 MediumEditor 공식 문서를 참조하시기 바랍니다.