TinyMCE文件上传教程

TinyMCE上传图片可以说是大家经常用的，TinyMCE文件上传用得比较少，因此，在文档中文件上传也没有详细的说明，因此，文件上传没有省事儿的办法，只能使用 file_picker_callback 写回调。

不过大家也别担心，我这里会给出例子，如果你能搞定图片上传，这里也就简单多了。

一、TinyMCE开启并配置文件上传功能

第1步：先启动个支持上传文件的插件

在plugins参数中把link加进去。

第2步：在工具栏显示链接编辑按钮

在toolbar参数中把link加进去。

此时，点链接工具是没有任何地方能上传文件的。

第3步：添加file_picker_callback参数

file_picker_callback: function(callback, value, meta) {}

这里我们先扔一个空函数，什么都不干，然后再次点编辑链接，这时在地址输入框的右侧，会显示一个上传的小图标。

最后如下代码示例：

tinymce.init({
    selector: '#editor',
    language:'zh_CN',
    plugins: 'link',
    toolbar: 'link',
    file_picker_callback: function(callback, value, meta) {},
});

点击“链接”按钮，就会出现如下图所示：

由于是个空函数，所以你点图标是没有任何反应的。

第四步：为了由浅入深，我们先来个从官方那找来的代码示例。

tinymce.init({
    selector: '#tinydemo3',
    language:'zh_CN',
    plugins: 'link',
    toolbar: 'link',
    file_picker_callback: function(callback, value, meta) {
        // Provide file and text for the link dialog
        if (meta.filetype == 'file') {
            callback('mypage.html', {text: 'My text'});
        }
        // Provide image and alt text for the image dialog
        if (meta.filetype == 'image') {
            callback('myimage.jpg', {alt: 'My alt text'});
        }
        // Provide alternative source and posted for the media dialog
        if (meta.filetype == 'media') {
            callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
        }
    },
});

我个人觉得：官方是想通过这个例子，来说明TinyMCE贴心地帮你把文件给你分了类型，让你可以根据不同的类型分别处理上传。

既然提到文件类型，就顺便把这个参数说了吧。

file_picker_types：此选项可以通过空格或逗号分隔的类型名称指定允许上传的类型。目前只有三个可用的值：file、image和media。全填上就这么写：

file_picker_types: 'file image media'

三个参数分别对应三个插件【link，image，media】，如果要屏蔽某个插件的上传，就去掉对应参数。

二、TinyMCE文件上传 代码示例

注意：

文件上传设置包含图片上传，配置文件上传后图片插件也会显示上传按钮，但tab栏不会出现上传选项。

下面是根据图片上传改写的文件上传。

tinymce.init({
    selector: '#tinydemo4',
    language:'zh_CN',
    plugins: 'link',
    toolbar: 'link',
    file_picker_callback: function (callback, value, meta) {
        //文件分类
        var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
        //后端接收上传文件的地址
        var upurl='/demo/upfile.php';
        //为不同插件指定文件类型及后端地址
        switch(meta.filetype){
            case 'image':
                filetype='.jpg, .jpeg, .png, .gif';
                upurl='upimg.php';
                break;
            case 'media':
                filetype='.mp3, .mp4';
                upurl='upfile.php';
                break;
            case 'file':
            default:
        }
        //模拟出一个input用于添加本地文件
        var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);
        input.click();
        input.onchange = function() {
            var file = this.files[0];

            var xhr, formData;
            console.log(file.name);
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', upurl);
            xhr.onload = function() {
                var json;
                if (xhr.status != 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);
                if (!json || typeof json.location != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                callback(json.location);
            };
            formData = new FormData();
            formData.append('file', file, file.name );
            xhr.send(formData);

            //下方被注释掉的是官方的一个例子
            //放到下面给大家参考
            
            /*var reader = new FileReader();
            reader.onload = function () {
                // Note: Now we need to register the blob in TinyMCEs image blob
                // registry. In the next release this part hopefully won't be
                // necessary, as we are looking to handle it internally.
                var id = 'blobid' + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(',')[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                // call the callback and populate the Title field with the file name
                callback(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);*/
        };
    },
});