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。
所选文件的大小(以字节为单位)。
url所选文件的 URL 格式如下:https://drive.tiny.cloud/1/<your api key>/<file uuid>
文件的修改日期,格式为 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
此选项根据以下文件类型类别限制显示的文件:
documentdoc, xls, ppt, pps, docx, xlsx, pptx, pdf, rtf, txt, key, pages, numbers
audiowav, wave, mp3, ogg, oga, ogx, ogm, spx, opus
videomp4, m4v, ogv, webm, mov
imagegif, jpeg, jpg, jpe, jfi, jif, jfif, pjpeg, pjp, png, tif, tiff, bmp, webp, avif, apng
archivezip
例如:如果应用程序使用 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 对话框已关闭。');
});
}
});
}
});