More

ckeditor에 입력한 텍스트를 자바스크립트로 제대로 가져올 수 없을때 해결방법

콜드카드

ckeditor에 입력한 텍스트를 form태그에 담아서 넘길땐 괜찮았는데 ajax를 사용하기 위해 ckeditor에 입력한 텍스트를 자바스크립트나 jquery로 <textarea> 태그에 있는 아이디를 선택해보니 입력값을 가져올 수가 없었습니다. 이 문제 때문에 ajax로 전환하려다 한참 시간 낭비 했네요.


ckeditor입력 텍스트 못가져오는 현상

간단하게 테스트 할 수 있도록 textarea태그에 ckeditor를 넣고 버튼을 이용해 자바스크립트와 jquery로 textarea태그 값을 가져오는 테스트를 해봤습니다.

<textarea class="ckeditor" id="editorTest" name="editorTest" rows="50" ></textarea>
<button type="button" id="runScriptTest">자바스크립트 테스트</button>
<button type="button" id="runJqueryTest">jquery 테스트</button> 


// 자바스크립트
document.querySelector('#runScriptTest').addEventListener("click", runScriptTest);
function runScriptTest(){
alert(document.querySelector('#editorTest').value);
}
// jquery
$('#runJqueryTest').click(function(){
alert($('#editorTest').val());
}); 


ckeditor-자바스크립트-데이터못가져옴

테스트 코드 실행화면입니다. ckeditor 입력란에 입력텍스트 라고 타이핑하고
자바스크립트로 가져오기와 jquery로 가져오기 테스트를 누르면
"입력텍스트" 라고 타이핑한 값을 못가져 옵니다



ckeditor에 입력한 값을 가져오는 방법

Ajax를 사용하기 위해 ckeditor 편집기에 입력한 값을 가져와야 할 경우 getData()를 사용해 가져와야 합니다.

<textarea class="ckeditor" id="editorTest" name="editorTest" rows="50" ></textarea>
<button type="button" id="runInstancesTest">인스턴스 테스트실행</button> 


// 인스턴스
document.querySelector('#runInstancesTest').addEventListener("click", function(){
alert(CKEDITOR.instances.editorTest.getData());
}); 


getData-이용해-데이터가져옴

getData() 를 이용해 ckeditor에 입력한 텍스트를 가져온 모습입니다.
입력한 텍스트가 정상적으로 가져와 지고 있습니다.


메뉴판

jsfiddle 사이트를 이용한 테스트 예제입니다.
https://jsfiddle.net/rxn1tzd9/1/


jsfiddle-테스트


Read Also
관심 있을 만한 글: