[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