이미지를 Chrome의 contenteditable에 커서로 놓습니다.

Question

Firefox에서 이미지를 바탕 화면의 contenteditable 필드로 드래그하면 이미지가 base64로 강조 표시 커서 위치로 삽입됩니다.

JSFiddle : 이제 크롬에서 이미지가 브라우저에서 열립니다

http://jsfiddle.net/zupa/YrwsS/ (pageload, 같은 바이올린으로 시도).

HTML5 덕분에 드롭 이벤트를 잡아서 이미지를 잡을 수 있습니다. 그러나 브라우저의 기본 동작을 중지하면 사용자가 어디에 놓을 지 알지 못하는 것입니다.

해결 방법을 제안 할 수 있습니까?

Answer 1

드롭 위치의 좌표를 얻을 수 있다면 (가능한 경우에 한함) 다음과 같이 수행 할 수 있습니다 (테스트 안됨).

데모 : http://jsfiddle.net/KZqNj/

코드 :

난 당신이 변수로 뷰포트 x 및 y 및 변수 img로 떨어 이미지에 드롭 위치의 상대 좌표를 가지고 있으리라 믿고있어

var range; 

// Try the standards-based way first 
if (document.caretPositionFromPoint) { 
    var pos = document.caretPositionFromPoint(x, y); 
    range = document.createRange(); 
    range.setStart(pos.offsetNode, pos.offset); 
    range.collapse(); 
    range.insertNode(img); 
} 
// Next, the WebKit way 
else if (document.caretRangeFromPoint) { 
    range = document.caretRangeFromPoint(x, y); 
    range.insertNode(img); 
} 
// Finally, the IE way 
else if (document.body.createTextRange) { 
    range = document.body.createTextRange(); 
    range.moveToPoint(x, y); 
    var spanId = "temp_" + ("" + Math.random()).slice(2); 
    range.pasteHTML('<span id="' + spanId + '">&nbsp;</span>'); 
    var span = document.getElementById(spanId); 
    span.parentNode.replaceChild(img, span); 
} 

파이어 폭스 만 document.caretPositionFromPoint() 임에도 불구하고 최근의 WebKit, Opera 및 Mozilla 브라우저에서 작동합니다.

참고 :

• http://dev.w3.org/csswg/cssom-view/#dom-document-caretpositionfrompoint