tinydrive.pick 方法允许用户从 Tiny Drive 中选择文件,并返回一个包含这些文件元数据的 promise 对象。此元数据可用于根据需要插入或检索文件。

文件选择器结果格式

tinydrive.pick 方法将返回一个包含 files 属性的 promise 对象。此 files 属性是一个文件数组,具有以下属性。

{
  "files": [
    {
      "name": "myphoto.jpg",
      "url": "https://drive.tiny.cloud/1/h0ed4hzbe69rfcrnj0uwvwi73e8y5m70jlolaalzkssog63b/48bda29d-ed1f-488f-adf7-b597dd3a8791",
      "size": 1180390,
      "type": "image",
      "mdate": "2018-06-13T16:49:10Z"
    }
  ]
}
name

所选文件的名称,例如:my.jpg。

size

所选文件的大小(以字节为单位)。

url

所选文件的 URL 格式如下:https://drive.tiny.cloud/1/<your api key>/<file uuid>

mdate

文件的修改日期,格式为 ISO 8601,例如:2019-02-24T15:00:00Z

交互示例:使用 tinydrive.pick

HTML

<textarea id="drive-pick-example">
  本演示展示了如何在 tinymce api 中调用 tinydrive。
</textarea>

JS

tinymce.init({
  selector: 'textarea#drive-pick-example',
  height: 200,
  menubar: false,
  plugins: 'tinydrive link image media',
  toolbar: 'custom | insertfile | link image media',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  setup: (editor) => {
    editor.ui.registry.addButton('custom', {
      text: '自定义选择',
      onAction: () => {
        editor.plugins.tinydrive.pick({
        }).then((result) => {
          result.files.forEach((file) => {
            const link = editor.dom.createHTML('a', { href: file.url }, editor.dom.encode(file.name));
            editor.insertContent(link);
          });
        });
      }
    });
  }
});

选项

filetypes

此选项根据以下文件类型类别限制显示的文件:

document

doc, xls, ppt, pps, docx, xlsx, pptx, pdf, rtf, txt, key, pages, numbers

audio

wav, wave, mp3, ogg, oga, ogx, ogm, spx, opus

video

mp4, m4v, ogv, webm, mov

image

gif, jpeg, jpg, jpe, jfi, jif, jfif, pjpeg, pjp, png, tif, tiff, bmp, webp, avif, apng

archive

zip

例如:如果应用程序使用 Tiny Drive 插入图像,则在文件类型数组中设置 ['image']。

类型: Array

交互示例:使用 filetypes 将 Tiny Drive 限制为图像格式

HTML

<textarea id="drive-pick-images-example">
  本演示展示了如何在 tinymce api 中调用 tinydrive。
</textarea>

JS

tinymce.init({
  selector: 'textarea#drive-pick-images-example',
  height: 200,
  menubar: false,
  plugins: 'tinydrive link image media',
  toolbar: 'custom | insertfile | link image media',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  setup: (editor) => {
    editor.ui.registry.addButton('custom', {
      text: '自定义选择图像',
      onAction: () => {
        editor.plugins.tinydrive.pick({
          filetypes: ['image']
        }).then((result) => {
          result.files.forEach((file) => {
            const img = editor.dom.createHTML('img', { src: file.url });
            editor.insertContent(img);
          });
        });
      }
    });
  }
});

max_image_dimension

此选项限制上传图像的宽度和高度。如果指定了此选项,任何宽度或高度大于指定值的图像将被按比例调整为指定的最大尺寸。

类型: Number

示例:在 tinydrive.browse API 中使用 max_image_dimension

tinymce.init({
  selector: 'textarea',
  plugins: 'tinydrive image',
  toolbar: 'custombrowse',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  setup: (editor) => {
    editor.ui.registry.addButton('custombrowse', {
      text: '自定义浏览',
      onAction: () => {
        editor.plugins.tinydrive.browse({
          max_image_dimension: 1024
        }).then(() => {
          console.log('Tiny Drive 对话框已关闭。');
        });
      }
    });
  }
});