如何获取与放置事件的位置相对应的范围对象？

Question

我想将图像拖放到 aloha 可编辑字段中。

我正在查看 at.tapo.aloha.plugins.Image< /a> 插件看起来很棒。

但是，我需要调整这个插件才能使用缩略图。我拖动缩略图，当我将其放入 aloha 可编辑窗口时，html 代码会即时修改，以便使用真实图像。

    GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableCreated', function(event, editable) {
        var the_obj = editable.obj;
        jQuery(editable.obj).bind('drop', function(event){
            var e = event.originalEvent;
            var files = e.dataTransfer.files;
            var count = files.length;

            if (count < 1) {
                var node = e.dataTransfer.mozSourceNode;
                if (node.tagName === 'IMG') {
                    var html = '<img ....>'; //build the real image html code  
                    /// The current selection but I want the drop position
                    var range = GENTICS.Aloha.Selection.getRangeObject();
                    if (!jQuery.isEmptyObject(range)) {
                        GENTICS.Utils.Dom.insertIntoDOM(jQuery(html), range, the_obj);
                    }
                    return false;
                }
                return true;
            }
    }

当在 Aloha 字段中选择某些内容时，它可以正常工作。我可以获取一个范围并将 html 插入到 DOM 中的选择位置。

但是，我想获得一个与图像放置位置相对应的范围对象。怎么做呢？

预先感谢您的想法。

Answer 1

据我所知，一般来说没有一种简单的方法可以做到这一点。您可以获取放置点的像素坐标（可能来自 mousemove 事件），然后尝试获取该点的范围。对于该任务，以下问题的答案很好地总结了它：

从 FF/Webkit 中的像素位置创建折叠范围

Answer 2

Tim Down 向我展示了没有简单的方法，我最终使用了一个解决方法：

GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableCreated', function(event, editable) {
    var the_obj = editable.obj;
    jQuery(editable.obj).bind('drop', function(event){
        setTimeout(function () {
            //at this point the html is updated and can be postprocessed 
            //in order to turn thumbnails into the real image

            //force the focus in order to make sure that the editable is activated
            //this will cause the deactivated event to be triggered, and the content to be saved
            the_obj.focus(); 
        }, 0);
    });
});