왜 여기에 CKEditor 붙여 넣기 이미지 작업을 수행합니다 http://sdk.ckeditor.com/samples/fileupload.html

Question

이 페이지에 CKEditor의 특징은 무엇

:

http://nightly.ckeditor.com/17-04-04-06-09/full/samples/

것은 당신이 쉽게 붙여 넣을 수 있습니다 Chrome 브라우저로 이미지를 편집기에 저장 하시겠습니까? 쉽게함으로써 내 말은 :

1. 컷 이미지 편집기에
2. 이동 커서를 클립 보드에.
3. 커서를 원하는 위치에 놓습니다.
4. Ctrl 키-V

당신은 단지 FF처럼 ... 수행됩니다. 이러한 편리한 붙여 넣기를 허용하는 유일한 샘플 CKEditor입니다.

Answer 1

난 당신이 '특별한'가 무슨 뜻인지 모르겠지만, 그것이 어떻게 작동하는지 당신이 궁금하다면 ...

그것은 구체적으로는 성가 시게 난독 것으로 해독하는 데 시간이 너무 오래 걸릴 것 IT는 않는 방법. ctrl + f를 눌렀을 때 ("dev console"을 통해 ckeditor.js에서) 단어 "paste"의 첫 번째 리턴에 중단 점을 설정하고 용감한 사람이라면 단계별로 진행하십시오. 내가 그것을 받아들이 기 전에 내가 가장 가치 있었던 것은 독특하고 내 시간의 가치가있는 것이 아니었다.

특별한 점은 무엇입니까? 아무 것도 정말로 ... 이벤트 onPaste를 트리거하고 클립 보드에서 이미지를 가져 와서 .getAsFile을 읽은 다음 .readAsDataURL을 사용하여 blob (.getAsFile의 출력)을 읽고 img 요소 src 특성에 결과를 삽입하십시오.

예 :

<textarea id="pasteArea" placeholder="Paste Image Here"></textarea> 
<img id="pastedImage"></img> 


document.getElementById('pasteArea').onpaste = function(event) { 
    // use event.originalEvent.clipboard for newer chrome versions 
    var items = (event.clipboardData || event.originalEvent.clipboardData).items; 
    var blob = null; 
    for (var i = 0; i < items.length; i++) { 
    if (items[i].type.indexOf("image") === 0) { 
     blob = items[i].getAsFile(); 
    } 
    } 

    if (blob !== null) { 
    var reader = new FileReader(); 
    reader.onload = function(event) { 
     document.getElementById("pastedImage").src = event.target.result; 
    }; 
    reader.readAsDataURL(blob); 
    } 
}