0

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

我正在查看看起来很棒的at.tapo.aloha.plugins.Image插件。

但是，我需要调整这个插件才能使用缩略图。我拖动缩略图，当我将其放入 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 中。

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

提前感谢您的想法。

4

2 回答 2

0

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

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

于 2011-10-03T23:04:00.787 回答
0

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);
    });
});
于 2011-10-04T09:05:38.310 回答