需要用上插件：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、最终效果：

总结：

由于这是一个免费插件，非常感谢作者的贡献。