ueditor 中拖拽图片,默认的是会上传到服务器,然后根据服务器返回的结果来生成一般的<img>标签。
那么我需要实现拖拽图片,生成的是srcData形式的<img>标签。
1、在uedit的初始化参数中增加一个做 convertImageToBase64Enable。用来控制是按照原来的方式上传还是用转换成base64的形式来处理图片。
2、修改autoupload.js代码,重新编译打包;或者修改umeditor.js中对应位置代码。
改动点只有2处(以autoupload.js为例):
a:增加了一个insertBase64Image 的 function。 第15行处。
b:根据convertImageToBase64Enable参数来判断对图片的处理是上传还是转Base64。第71行处。
autoupload.js:
/**
* @description
* 1.拖放文件到编辑区域,自动上传并插入到选区
* 2.插入粘贴板的图片,自动上传并插入到选区
* @author Jinqn
* @date 2013-10-14
*/
UM.plugins['autoupload'] = function () {
var me = this;
me.setOpt('pasteImageEnabled', true);
me.setOpt('dropFileEnabled', true);
var insertBase64Image = function (file, editor) {
var reader = new FileReader();
reader.onload = function (e) {
editor.execCommand('insertimage', {
src: this.result,
_src: this.result
});
};
reader.readAsDataURL(file);
}
var sendAndInsertImage = function (file, editor) {
//模拟数据
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
});
} catch (er) {
}
});
xhr.send(fd);
};
function getPasteImage(e) {
return e.clipboardData && e.clipboardData.items && e.clipboardData.items.length == 1 && /^image\//.test(e.clipboardData.items[0].type) ? e.clipboardData.items : null;
}
function getDropImage(e) {
return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files : null;
}
me.addListener('ready', function () {
if (window.FormData && window.FileReader) {
var autoUploadHandler = function (e) {
var hasImg = false,
items;
//获取粘贴板文件列表或者拖放文件列表
items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);
if (items) {
var len = items.length,
file;
while (len--) {
file = items[len];
if (file.getAsFile) file = file.getAsFile();
if (file && file.size > 0 && /image\/\w+/i.test(file.type)) {
me.getOpt('convertImageToBase64Enable') ? insertBase64Image(file, me) : sendAndInsertImage(file, me);
hasImg = true;
}
}
if (hasImg) return false;
}
};
me.getOpt('pasteImageEnabled') && me.$body.on('paste', autoUploadHandler);
me.getOpt('dropFileEnabled') && me.$body.on('drop', autoUploadHandler);
//取消拖放图片时出现的文字光标位置提示
me.$body.on('dragover', function (e) {
if (e.originalEvent.dataTransfer.types[0] == 'Files') {
return false;
}
});
}
});
};