2012-11-21 7 views
1

div의 click 이벤트에서 ckeditor를 열고 해당 div의 데이터를 ckeditor로 가져 오도록 자바 스크립트를 만들었습니다. 업데이트 된 데이터를 가져올 수있는 항목이 필요합니다. 그 div에 다시 ckeditor. 동적으로 발생합니다.div에 동적으로 데이터를 가져 오려고합니다

나는 DIV

//var editor, html = ''; 
function createEditor(ele) 
{ 
var x = ele.innerHTML; 


CKEDITOR.instances.editor1.setData(x); 


var y = document.getElementById("editor1").value; 
alert(y); 
//ele.innerHTML = y; 
document.getElementById("editor1").style.display = "block"; 

} 


    </script> 

에서 데이터를 얻을이 자바 스크립트를 사용하고 그리고 내 HTML은

<div onclick="createEditor(this);" id="id2"> hello how r u? </div> 

가에 onKeyUp에 이벤트를 바인딩 것을, 나는 생각이

답변

4

그래서 CKEditor의 실시간 미리보기가 필요하십니까? keyup 이벤트에서는이 작업을 수행 할 수 없지만 key (instance.on('key', doSomething());)과 같은 CKEditor 이벤트를 사용할 수 있습니다.

1 단계 : ID와

  1. 텍스트 영역 : 편집기 ID와
  2. 사업부 : 페이지에 두 가지 요소를 추가 미리보기

... 
<body> 
    <textarea id="editor"></textarea> 
    <div id="preview"></div> 
</body> 
... 

2 단계 : 자바 스크립트가 #previewkey 이벤트를 감지하고 업데이트에 추가 :

CKEDITOR.replace('editor'); //new ckeditor instance 
var editor = CKEDITOR.instances.editor; //reference to instance 

//on `key` event 
editor.on('key', function(){ 

    var data = editor.getData(); //reference to ckeditor data 
    $('#preview').html(data); //update `div` html 

}); 

I've created a preview in JSBin.

+0

그 위대한 일 .. 감사합니다 톤 형제 .. –

+0

@ NishantSolanki 위대한 나는 듣고 기쁘게 생각합니다. 내 대답을 수락 해 주셔서 감사합니다! –

1

에 제발 도와주세요입니다 귀하의 ckeditor 텍스트 영역, 트릭을해야합니다. http://www.w3schools.com/jsref/event_onkeyup.asp

+0

내가 쉽게 할 수 있지만 ckeditor에서 데이터를 가져 오는 자바 스크립트 아이디어를 얻지 못하고 있습니다. CKEDITOR.instances.editor1.getData; 텍스트를 제공하지 않습니다. –

+0

참조로 w3schools.com을 참조하지 마십시오. http://w3fools.com/ MDN 또는 기타 잘 구성된 리소스를 사용하십시오. 감사. – AlexStack

+1

'var editor_data = CKEDITOR.instances.editor1.getData();'이게 작동해야합니다. – GBD

관련 문제