[javascript] TinyMCE에서 텍스트 에디터에서 텍스트를 저장하는 방법은?
-
텍스트를 저장하기 전에 TinyMCE 에디터 인스턴스를 초기화해야 합니다. 필요한 경우 이를 설정할 수 있습니다.
tinymce.init({ selector: 'textarea', // 에디터를 적용할 텍스트영역 선택자 // 추가 설정 옵션들... });
-
텍스트를 에디터에 입력한 후, 저장할 때
save
이벤트 핸들러를 사용합니다. 이 이벤트는 저장 버튼을 클릭했을 때 발생합니다.tinymce.activeEditor.on('save', function(e) { // 에디터에서 입력한 텍스트를 가져옵니다. var content = tinymce.activeEditor.getContent(); // 텍스트를 저장하는 작업을 수행합니다. // 예: Ajax 요청을 이용하여 서버로 전송하거나, 로컬 스토리지에 저장할 수 있습니다. // 저장 후에 필요한 동작을 수행합니다. // 예: 저장이 완료되었다는 메시지를 표시하거나, 다른 동작을 수행합니다. });
-
save
이벤트 핸들러에서 텍스트를 저장하는 방식은 사용자의 요구사항에 따라 다를 수 있습니다. 예를 들어, 텍스트를 서버로 전송하는 경우 Ajax 요청을 사용할 수 있습니다.tinymce.activeEditor.on('save', function(e) { var content = tinymce.activeEditor.getContent(); // Ajax 요청을 생성합니다. var xhr = new XMLHttpRequest(); xhr.open('POST', '/save-text', true); xhr.setRequestHeader('Content-Type', 'application/json'); // 서버로 텍스트를 전송합니다. xhr.send(JSON.stringify({ text: content })); // 요청이 완료되면 다른 동작을 수행합니다. xhr.onload = function() { if (xhr.status === 200) { console.log('Text saved successfully!'); } else { console.error('Error saving text!'); } }; });
위의 코드에서는 save
이벤트 핸들러에서 Ajax 요청을 생성하여 텍스트를 서버로 전송하는 방식으로 텍스트를 저장하는 방법을 보여줍니다. 필요한 경우, 실제 서버 주소와 요청 방식을 조정해야 합니다.
TinyMCE 공식 문서(https://www.tinymce.com/docs/)는 더 많은 정보를 제공하고 다양한 기능과 설정에 대해 자세히 다루고 있습니다.