一直在用百度的UMeditor,但是发现这个编辑器相比同出师门的Ueditor,更新频率差了很多。
在Ueditor中我们粘贴QQ截屏的时候,会先在编辑器中显示一个加载的GIF,如下图显示
而在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,另存为下面这个就是了。
再次测试,就可以看到效果了