MediumEditor는 JavaScript로 작성된 오픈 소스 WYSIWYG (What You See Is What You Get) 에디터입니다. 이 에디터를 사용하면 사용자가 텍스트를 편집하는 동안 서식을 적용하거나 이미지를 삽입할 수 있습니다. 하지만 때로는 사용자가 에디터에서 작업을 수행하는 동안 페이지를 새로고침하거나 다른 페이지로 이동해야 할 수도 있습니다. 이 경우 사용자가 작업한 내용을 복원할 수 있는 기능이 필요합니다.

이 글에서는 MediumEditor에서 에디터 상태를 저장하고 복원하는 방법을 알아보겠습니다.

에디터 상태 저장하기

에디터 상태를 저장하기 위해선 쿠키 또는 브라우저의 로컬 스토리지를 사용할 수 있습니다. 이 예제에서는 로컬 스토리지를 사용하도록 하겠습니다.

// 에디터 상태를 저장하는 함수
function saveEditorState() {
  var content = document.getElementById('editor').innerHTML;
  localStorage.setItem('editorState', content);
}

위의 코드에서 saveEditorState 함수는 에디터 내용을 가져와서 로컬 스토리지에 ‘editorState’라는 키로 저장합니다.

에디터 상태 복원하기

에디터 상태를 복원하기 위해서는 페이지가 로드될 때 로컬 스토리지에서 저장된 상태를 가져와서 에디터에 적용해야 합니다.

// 에디터 상태를 복원하는 함수
function restoreEditorState() {
  var content = localStorage.getItem('editorState');
  if (content) {
    document.getElementById('editor').innerHTML = content;
  }
}

위의 코드에서 restoreEditorState 함수는 로컬 스토리지에서 ‘editorState’라는 키로 저장된 상태를 가져와서 에디터에 적용합니다.

페이지 로드 시 호출하기

마지막으로, 페이지가 로드될 때 restoreEditorState 함수를 호출하여 이전에 저장된 에디터 상태를 복원해야 합니다. 이를 위해 window.onload 이벤트를 사용할 수 있습니다.

window.onload = function() {
  restoreEditorState();
};

위의 코드에서 window.onload 이벤트는 페이지가 로드되면 restoreEditorState 함수를 호출합니다.

결론

MediumEditor를 사용하면 에디터 상태를 저장하고 복원하는 기능을 쉽게 구현할 수 있습니다. 이 기능을 사용하면 사용자가 작업한 내용을 잃지 않고 편집 작업을 계속할 수 있습니다.