需要用上插件:axupimgs
插件作者:莫若卿
支持版本:5.0.4+
支持语言:仅中文
插件版本:1.6
一、axupimgs 插件作用:
这是一个tinymce多图片批量上传插件,支持拖拽文件添加,拖拽支持白名单,自动过滤非白名单文件类型,支持全选后直接无脑拽。
注意:此插件依赖image插件,不能单独使用。默认下载的TinyMCE编辑器里也是不包含此插件的,需要单独下载。
二、axupimgs 插件下载:
TinyMCE中文网站:http://tinymce.ax-z.cn/more-plugins/axupimgs.zip
百度风盘链接:链接: https://pan.baidu.com/s/1w4RE_an7Xi8KLLAVm6kf4A 提取码: ivjj
三、axupimgs 插件使用方法:
1、将解压得到的文件夹,放到TinyMCE主目录下的plugins文件夹内。
2、前端JS代码:
以下这段JavaScript代码,images_upload_handler那段可以直接复制用,只需要改Ajax POST提交后端处理的路径即可!
tinymce.init({
selector: '#tinydemo',
plugins: "code image axupimgs",
toolbar: "code axupimgs",
images_upload_base_path: '/demo',
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/demo/upimg2.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.location);
};
formData = new FormData();
formData.append('file', file, file.name );
xhr.send(formData);
}
});
必须参数
images_upload_handler
插件直接调用图片上传的回调参数进行上传,所以图片回调是必须写的。
可选参数
images_upload_base_path
图片回调url的相对路径,可写可不写,为兼容图片回调而设。
插件自身的参数
axupimgs_filetype
设置允许上传的图片类型,默认参数能满足大部分需求。这里只是前端判断,后端需要自行判断文件类型。
默认值:'.png,.gif,.jpg,.jpeg'
3、PHP后端处理代码:upimg2.php
这里我就不多写了,可以直接跟“TinyMCE图片上传”代码一样,毕竟都是处理单张图片,只不过这里用的是AJAX处理。同样多图上传这里返回的JSON格式也是一样的。
4、最终效果:
总结:
由于这是一个免费插件,非常感谢作者的贡献。