[javascript] TinyMCE에서 텍스트 에디터의 로컬 저장 기능을 활성화하는 방법은?

먼저, TinyMCE를 초기화하는 JavaScript 코드에서 로컬 저장 플러그인을 추가해야 합니다. 다음은 TinyMCE를 초기화하는 코드 내에서 로컬 저장 플러그인을 추가하는 방법입니다.

tinymce.init({
  selector: 'textarea', // 텍스트 에디터가 적용될 textarea 요소의 선택자
  plugins: 'save', // 로컬 저장 플러그인을 추가
  toolbar: 'save', // 툴바에 로컬 저장 버튼을 추가
  save_onsavecallback: function() {
    // 로컬 저장 버튼 클릭 시 실행될 콜백 함수
    // 이 함수 내에서 텍스트 에디터의 내용을 어딘가에 저장하기 위한 로직을 구현
  }
});

위 코드에서 plugins: 'save' 부분이 로컬 저장 플러그인을 추가하는 부분입니다. 이렇게 설정하면 텍스트 에디터에 로컬 저장 버튼이 나타납니다.

또한, save_onsavecallback 콜백 함수를 정의하여 로컬 저장 버튼을 클릭했을 때 실행될 로직을 구현해야 합니다. 이 함수 내에서 텍스트 에디터의 내용을 어딘가에 저장하는 로직을 작성하면 됩니다. 예를 들어, localStorage를 사용하여 브라우저의 로컬 스토리지에 내용을 저장할 수 있습니다.

save_onsavecallback: function() {
  var content = tinymce.activeEditor.getContent(); // 텍스트 에디터의 내용을 가져옴
  localStorage.setItem('editor_content', content); // 로컬 스토리지에 내용 저장
}

위 예시에서는 localStorage.setItem() 메서드를 사용하여 editor_content라는 키로 내용을 저장하고 있습니다. 저장한 내용은 필요할 때 localStorage.getItem() 메서드를 사용하여 다시 가져올 수 있습니다.

이렇게 설정하고 로컬 저장 플러그인을 활성화하면 사용자가 텍스트를 편집하고 로컬 저장 버튼을 클릭하면 텍스트 에디터의 내용을 로컬 스토리지에 저장할 수 있게 됩니다.

참고: TinyMCE 공식 문서 - Save Plugin