配置参考 \ 图片&文件上传配置设置TinyMCE的图片和文件上传参数

此页更新时间：2020-10-28 11:46

此页英文文档：https://www.tiny.cloud/docs/configure/file-image-upload/

配置选项列表：

如要快速上手，可以阅读《简介与入门：上传图片和文件》这个章节，里面包含完整的上传代码示例。

automatic_uploads

开关使用Data URL/Blob URL插入图片和文件到内容区的方式。例如，图像是使用imagetools插件处理后插入到内容区的，此时图像并未真正上传到服务器，而是以Data URL/Blob URL的方式插入在内容中。

该选项默认是开启的，如禁用，则必须配置images_upload_url，即指定接收图片上传的远程地址，如未指定该配置，则禁用无效。

也可使用tinymce自带方法 uploadImages 手动上传。

取值：true / false

默认：true 

tinymce.init({
    selector: '#textarea1',
    automatic_uploads: false,
    images_upload_url: 'postAcceptor.php',
});

file_picker_callback（文件上传回调）

配置此选项将在图片、媒体、链接对话框中加入上传文件功能

当用户点击上传按钮后，TinyMCE将在你自定义的函数中传递三个参数：

  • callback：上传成功后执行的回调函数，此函数是由TinyMCE定义的，它的第一个参数是上传结果，第二个参数可以是一个object，其中定义了要填入对话框中的字段键值。
  • value：当前受影响的字段值
  • meta：为一个包含指定对话框中其它字段值的对象（meta.filetype是当前对话框的文件类型）

注意：file_picker_callback仅为一个自定义钩子，具体上传功能需要自己实现。

取值：Function

该功能的演示请参考：《简介与入门：上传图片和文件》中的文件上传部分，里面包含完整的上传代码示例。

file_picker_types（文件选择器的使用场景）

使用空格或逗号分隔，允许的值包括：file,image和media。该选项需配合file_picker_types使用，未指定的对话框则不会出现文件上传按钮。file对应链接对话框，image对应图片对话框，media对应多媒体对话框。

类型：String

取值：'file image media' 

tinymce.init({
    selector: '#textarea1',
    file_picker_callback: function(){},
    file_picker_types: 'file image media',
});

images_dataimg_filter

5.3.0不推荐使用，并于5.3.2被移除

定义一个自定义过滤器处理base64图像转blobs的逻辑。

该函数的参数是一个DOM对象。

取值：Function 

tinymce.init({
    selector: '#textarea1',
    images_dataimg_filter: function(img) {
        return img.hasAttribute('internal-blob');
    }
});

images_reuse_filename

TinyMCE默认会给每个上传的文件生成唯一的文件名。有时候我们不希望这么做，例如，automatic_uploads被开启时，尽管当前图片文件没有变，但使用imagetools插件对图像进行每一次操作都会导致文件上传，并且每次都将使用不同的文件名。

将该配置设为true则可以避免此问题，它将告诉TinyMCE使用图片文件实际的文件名，而不是每次随即生成一个新的。

因为img标签的src属性可能是服务器返回来的任何文件名，该文件名将在下次上传时被使用。

译者注：该配置目前仅imagetools插件有用。

取值：true / false

默认：false 

tinymce.init({
    selector: '#textarea1',
    automatic_uploads: true,
    images_upload_url: 'postAcceptor.php',
    images_reuse_filename: true,
});

images_upload_url（上传实现的URL）

指定接收上传图片的后端地址。调用editor.uploadImages()或utomatically时如果启用automatic_uploads则会触发该配置。

上传程序应按以下格式返回上传后的文件url：

//json格式
{ "location": "folder/sub-folder/new-location.png" }

该功能的演示请参考：《简介与入门：上传图片和文件》，里面包含完整的上传代码示例。

取值：string

images_upload_url: 'postAcceptor.php'

images_upload_base_path（图片地址基本目录）

指定一个基本路径，多用于不同目录结构中，修正上传图片功能返回的图片相对地址。

取值：string

images_upload_base_path: '/some/basepath'

images_upload_credentials

对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。

取值：true / false

默认：false

images_upload_credentials: true

images_upload_handler（图片上传自定义实现）

此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数可接受四个参数：

  • blobInfo
  • 成功回调
  • 失败回调
  • 上传进度（取值1-100）

如果未使用此配置，TinyMCE将使用ajax每次上传一个图片，并在成功返回结果后调用成功回调函数。

此函数将完全接管编辑器的图片上传，你需要在上传成功后执行成功回调函数，参数则为图片URL，也可以在第二个参数加入对话框填充数据对象。

取值：Function

以下为自定义上传实现的一个代码示例：

tinymce.init({
    selector: '#textarea1',
    images_upload_handler: function (blobInfo, success, failure, progress) {
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'postAcceptor.php');

        xhr.upload.onprogress = function(e){
            progress(e.loaded / e.total * 100);
        }

        xhr.onload = function() {
            var json;
            if (xhr.status == 403) {
                failure('HTTP Error: ' + xhr.status, { remove: true });
                return;
            }
            if (xhr.status < 200 || xhr.status >= 300 ) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success(json.location);
        };

        xhr.onerror = function () {
            failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
        }

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        
        xhr.send(formData);
    }
});

下一节：本地化配置

▲