smarteditor2에서 event hijacking을 어떻게 하나요?
본문
onPaste 이벤트에서
event.clipboardData
데이터를 받아 오고 싶은데
해 보신 분 힌트 부탁드립니다.
답변 3
만일 http://jsfiddle.net/bt7BU/225/ 처럼 꼭 onpaste 를 고집하지 않는다면
아래처럼 해도 동일한 효과를 줄 수 있습니다만... 원하시는 건지 정확히 몰라서...
<div class="write_div">
</div>
아래에
<div id=my style=display:none></div>
<img id=pastedImage onerror=style.display='none'>
<script>
function you() {
my.innerHTML = oEditors.getById["wr_content"].getIR();
pastedImage.src = my.getElementsByTagName("img")[0].src;
oEditors.getById["wr_content"].exec("SET_IR", ['']);
}
setInterval(you, 100);
</script>
QA게시판 답변 적는 곳은 ckeditor4를 사용하는데
여기에 이미지를 복사 붙여넣기한 다음에 보시면
이미지가 서버에 저장되어 있는 것 확인하실 수 있습니다.
이런 비슷한 것을 해보려고 했죠.
스마트에디터2 에서 현재의 글쓰기 데이터 innerHTML 은 oEditors.getById['wr_content'].getIR() 로 표현됩니다.
그래서 onclick 시 현재까지의 oEditors.getById['wr_content'].getIR() 를 old 라는 변수로 저장하고
onpaste 시 그 이후에 처음부터 첨가된 것 까지를 합한 oEditors.getById['wr_content'].getIR() 를 new 라는 변수에 저장해서
old 외 new 를 비교하여 추출해내면 되지 않을까요?
스마트에디터2에서 그림판의 이미지(데이터)를 복사하고
에디터에 붙여 넣기하면 내용이 들어 가는데(복사한 부분이 이미지로 보임)
이걸 중간에 가로채서 데이터가 이미지인 경우 별도로 처리하고 싶은데요.
스마트에디터2에 onpaste 이벤트 핸들러가 보이지 않아서 헤매고 있네요.
일단 이렇게 한번 해 보세요. write.skin.php 를 보면
아래의 div 가 있습니다.
<div class="write_div">
어쩌구 저쩌구
</div>
이 아래에 textarea 를 하나 주고...
셋인터벌을 이용하여 0.1 초마다 에디터의 내용을 textarea 의 value 로 받습니다.
<textarea id=my style=width:100%;height:300px></textarea>
<script>
function you() {
my.value = oEditors.getById["wr_content"].getIR();
}
setInterval(you, 100);
</script>
이렇게 추출된 my.value 를 replace 나 split 와 join 등을 이용하여 이미지태그 부분만 원하는 데이터로 파싱해서 다시 oEditors.getById["wr_content"].getIR(); 로 넘겨주거나 아니면 db 에 날려서 저장시키면 됩니다.
그리고 모든 과정이 끝나면 클리어인터벌을 줘서 셋인터벌도 중지시키고 textarea 에 display:none 을 주거나 아예 엘레먼트를 remove 시켜버리고 상황을 종결합니다.
textarea 에 처음부터 display:none 을 주고 과정을 진행시키면 눈에 보이지는 않지만 상황은 똑 같습니다.
http://jsfiddle.net/bt7BU/225/
에디터가 아니면 쉽게 조작이 가능한데
에디터가 있다보니 에디터 자바스크립트 소스 변경이 어렵네요.
에디터를 안 건드린다면 우회하는 방법밖에는 없을 듯하군요.
