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

此页更新时间:2019-03-01 20:43

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

配置选项列表:

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

automatic_uploads

写在开头:该配置译者未测试出来有什么作用。

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

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

取值:true / false

默认:true

tinymce.init({
    selector: '#textarea1',
    automatic_uploads: false,
    images_upload_url: 'postAcceptor.php',
    //以上官方示例未体现出该配置有什么用
    //因为实测将其设为true或false都不能改变上传行为
    //images_upload_url参数也与其无关
});
译者注:上面官方这个例子没看出来有什么用,目前该配置仅imagetools插件有效,不过这插件是付费的(捂脸)
译者注:实测内联模式quickbars插件提供的图片上传与此开关无关。

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

定义一个自定义过滤器处理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、成功回调和失败回调。

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

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

取值:Function

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

tinymce.init({
    selector: '#textarea1',
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'postAcceptor.php');

        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;
            }
            success(json.location);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    }
});

下一节:本地化配置