UMeditor为粘贴QQ截屏增加等待图片

一直在用百度的UMeditor,但是发现这个编辑器相比同出师门的Ueditor,更新频率差了很多。

在Ueditor中我们粘贴QQ截屏的时候,会先在编辑器中显示一个加载的GIF,如下图显示

QQ截图20141203170612

而在UM中完全没有这个效果,导致在实际部署中用户虽然使用了粘贴功能却不知道是否有文件正在上传。本地测试不容易发现因为上传速度太快了。

所以我们在UM中把这个功能加上即可,定位到umeditor.js,找到拖放文件到编辑区域,自动上传并插入到选区这个注释后面autoupload中的sendAndInsertImage函数

替换成如下代码

var sendAndInsertImage = function (file, editor) {

//创建模拟图片
var loadingId = 'loading_' + (+new Date()).toString(36);
var loadingHtml = '';
editor.execCommand('inserthtml', loadingHtml);

//模拟数据
var fd = new FormData();
fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));
fd.append('type', 'ajax');
var xhr = new XMLHttpRequest();
xhr.open("post", me.options.imageUrl, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.addEventListener('load', function (e) {
    try {
        var json = eval('('+e.target.response+')'),
            link = json.url,
            picLink = me.options.imagePath + link;
       /* editor.execCommand('insertimage', {
            src: picLink,
            _src: picLink
        });*/
        var loader = me.document.getElementById(loadingId);
        if (loader) {
            loader.setAttribute('src', picLink);
            loader.setAttribute('_src', picLink);
            loader.removeAttribute('id');
         }
    } catch (er) {
    }
});
xhr.send(fd);
};

另外别忘了在themes\default\images文件夹下面放一个loading.gif,另存为下面这个就是了。
loading

再次测试,就可以看到效果了

QQ截图20141203171400

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注