在Chrome中将图像放入可追忆的光标中 [英] Drop image into contenteditable in Chrome to the cursor

问题描述

在Firefox中，如果我将一个图像从桌面拖动到一个可输入的字段中，它将被嵌入base64到HIGHLIGHTED光标位置。

JSFiddle： http://jsfiddle.net/zupa/YrwsS/

感谢HTML5，您可以捕捉到drop事件，并且可以在Chrome浏览器中打开该图像（页面加载，尝试在同一个小提琴中）用它捕捉图像。但是如果我停止浏览器的默认行为，我不知道用户想要放弃的位置。

你可以建议一个解决方法吗？

解决方案

如果您可以获取放置位置的坐标（我认为必须是可能的），则可以按照以下方式进行操作（未经测试）。我假设您已经将相对于视口的放置位置的坐标变量 x 和 y 和丢弃的图像作为变量 img ：

演示： http://jsfiddle.net/KZqNj/

代码：

  var range; 
 
 //尝试基于标准的方式首先
 if（document.caretPositionFromPoint）{
 var pos = document.caretPositionFromPoint（x，y）; 
 range = document.createRange（）; 
 range.setStart（pos.offsetNode，pos.offset）; 
 range.collapse（）; 
 range.insertNode（img）; 
} 
 //接下来，WebKit方式
 else if（document.caretRangeFromPoint）{
 range = document.caretRangeFromPoint（x，y）; 
 range.insertNode（img）; 
} 
 //最后，IE方式
 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）; 
} 
  

这将适用于最近的WebKit，Opera和Mozilla浏览器，虽然只有Firefox的执行 document.caretPositionFromPoint（）。

参考文献：

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

In Firefox, if I drag an image into a contenteditable field from the desktop, it will be embedded as base64 TO the HIGHLIGHTED cursor position.

JSFiddle: http://jsfiddle.net/zupa/YrwsS/

Now in Chrome, the image is opened by the browser (pageload, try in same fiddle).

Thanks to the HTML5 you can catch the drop event, and catch the image with it. But if I stop browsers default behavior, I am stuck not knowing where the user wanted to drop it.

Can you suggest a workaround?

解决方案

If you can get the co-ordinates of the drop location (which I assume must be possible), you can do it as follows (untested). I'm assuming you've got the co-ordinates of the drop location relative to the viewport as variables x and y and the dropped image as the variable img:

Demo: http://jsfiddle.net/KZqNj/

Code:

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);
}

This will work in recent-ish WebKit, Opera and Mozilla browsers, although only Firefox has an implementation of document.caretPositionFromPoint().

References:

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

这篇关于在Chrome中将图像放入可追忆的光标中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！