概述
Tiny Drive 使您能够通过提供 Google 凭据来设置 Google Drive 集成,从而从任何 Google Drive 账户导入文件。当用户从 Google Drive 中选择文件时,该文件将立即上传或导入到 Tiny Drive 存储中,以便可以通过 Tiny Drive 在线查看和共享。从 Google Drive 中选择的文档将在 Tiny Drive 内转换为 PDF 文件。
前提条件
将 Google Drive 与 Tiny Drive 集成需要一个有效的 Google Drive 用户账户。有关创建 Google Drive 用户账户的更多信息,请参阅此 Google Drive 链接。
应启用 Google Drive API。有关启用 Google Drive API 的更多信息,请参阅此 Google Drive 链接。
应启用 Google Picker API。有关启用 Google Picker API 的更多信息,请参阅此 Google Drive 链接。
获取 API Key 和 Client ID
您可以按照以下步骤获取 Google Drive 凭据。
1. 创建 Google API Key
点击
Create credentials按钮。点击
API key项。
2. 复制新的 Google API Key
复制生成的 Google API key,稍后将用于配置 Tiny Drive:
3. 创建 OAuth client ID
点击 Create credentials 按钮,然后点击 OAuth client ID 项:
4. 填写 OAuth 详细信息
从
Application type中选择Web application将您的域名添加到
Authorized JavaScript origins中。点击
create。复制创建的
client id,稍后将用于配置 Tiny Drive。
5. 限制 Client ID 的 API 访问权限
点击您创建的 Client ID 的编辑图标
点击
API restrictions标签页点击
Select API下拉菜单从下拉菜单中选择
Google Picker API点击
Save
6. 配置 tinydrive 以使用新的 Google Drive 凭据
可以通过设置 tinydrive_google_drive_key 来配置 Google Drive API key。可以通过设置 tinydrive_google_drive_client_id 来配置 Google OAuth client ID。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'tinydrive',
tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
tinydrive_google_drive_key: '<your google api key>',
tinydrive_google_drive_client_id: '<your google drive OAuth client ID>'
});有关其他 Tiny Drive 配置选项的信息,请参阅本文档的 配置部分。
7. Tiny Drive UI
从 TinyMCE 用户界面中,点击
按钮以访问 Tiny Drive 用户界面。点击
按钮,从存储列表中选择 Google Drive。通过点击文件旁边的复选框按钮,选择要从 Google Drive 上传/导入的文件。或者,要直接将文件插入编辑器中,请双击该文件。
选择 保存 以将所选文件上传/导入到 Tiny Drive 中。
结果:您应该能够在 Tiny Drive 存储中查看所选文件。
其他文件选项
可以对所选文件执行以下其他选项:
按照 Tiny Drive UI 过程的第 1-3 步操作。
根据需要从以下选项中进行选择:
选择 星标 以标记重要文件,并在 Google Drive 主页的 星标 标签页下查看已加星标的文件。
选择 下载 以下载所选文件。
选择 删除 以从 Google Drive 中删除所选文件。
在 此处 阅读有关这些选项的更多信息。
交互式示例
以下是 Tiny Drive 中启用的 Google Drive 的交互式示例。
HTML
<textarea id="drive-demo">
<h2>全球首款云端富文本编辑器</h2>
<p>
您听说过 Tiny Cloud 吗?这是我们帮助不同专业水平的用户实现卓越内容创作体验的第一步。目前已有 50,000 名开发者加入我们。他们可免费使用我们的全球 Content Delivery Network、图片代理服务以及 TinyMCE 编辑器的自动更新功能。他们还为即将推出的一些激动人心的更新做好了准备。
</p>
<p>
这些增强功能之一就是 <strong>Tiny Drive</strong>:想象一下,为 TinyMCE 在云端提供文件管理,而且超级简单。请访问<a href="https://www.tiny.cloud/docs/tinymce/8/tinydrive-introduction/#interactive-example">我们的工作演示</a>了解更多信息,在那里您有机会向产品团队提供反馈。
</p>
<h3>适用于每个项目的编辑器</h3>
<p>
以下是我们的客户使用 TinyMCE 的常见场景:
</p>
<ul>
<li>内容管理系统(<em>WordPress、Umbraco</em>)</li>
<li>学习管理系统(<em>Blackboard</em>)</li>
<li>客户关系管理和营销自动化(<em>Marketo</em>)</li>
<li>电子邮件营销(<em>Constant Contact</em>)</li>
<li>SaaS 系统中的内容创建(<em>Eventbrite、Evernote、GoFundMe、Zendesk</em>)</li>
</ul>
<p> </p>
<p>
这些用例仅仅是开始。TinyMCE 非常灵活,拥有数百个 API,很可能有适合您编辑器项目的解决方案。如果您还没有体验过 Tiny Cloud,请立即开始。您甚至可以免费试用 Premium 插件——无需信用卡!
</p>
</textarea>JS
tinymce.init({
selector: 'textarea#drive-demo',
plugins: 'image media link tinydrive code editimage',
height: 600,
toolbar: 'insertfile image link | code',
tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID'
});