概述

通过提供 Dropbox app key 来设置 Dropbox 集成后，Tiny Drive 使您能够从任何 Dropbox 账户导入文件。当用户从 Dropbox 中选择文件时，该文件将立即上传或导入到 Tiny Drive 存储中，以便可以通过 Tiny Drive 在线查看和共享。

前提条件

要将 Dropbox 与 Tiny Drive 集成，需要一个有效的 Dropbox 用户账户。有关创建 Dropbox 用户账户的更多信息，请参阅此链接。

获取 Dropbox app key

按照以下步骤即可启动并运行 Dropbox 集成。

1. 创建应用程序

  1. 打开Create app页面。

  2. 从Choose an API中选择Dropbox API。

  3. 从Choose the type of access you need中选择Full Dropbox。

  4. 为您的应用程序指定一个公司独有的名称，例如acmeinc-tinydrive。

2. 获取 Dropbox app key 并添加域名

  1. 从App key中复制该 key，然后将它用作tinydrive_dropbox_app_key的 key。

  2. 在Chooser/Saver domains中配置用于承载应用程序的域名。

3. 配置 tinydrive 以使用新的 Dropbox app key

通过设置tinydrive_dropbox_app_key来配置 Dropbox API key，如下例所示。

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'tinydrive',
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  tinydrive_dropbox_app_key: '<your dropbox app key>'
});

有关其他 Tiny Drive 配置选项的信息，请参阅本文档的配置部分。

4. Tiny Drive UI

  1. 从 TinyMCE 用户界面中，点击插入/编辑图像按钮，以访问 Tiny Drive 用户界面。

  2. 点击上传/创建按钮，从存储列表中选择 Dropbox。

  3. 通过点击文件旁边的复选框来选择要从 Dropbox 上传/导入的文件，然后点击Choose按钮进行上传，或点击Cancel取消操作。

  4. 或者，通过点击上传文件选项并选择要上传的文件，可将本地浏览器中的文件上传到 Dropbox。

结果：您应该能够在 Tiny Drive 存储中查看所选文件。

阅读其他 Dropbox 选项此处。

交互示例

这是一个在 Tiny Drive 上启用 Dropbox 功能的交互示例。

HTML

<textarea id="drive-demo">
  <h2>全球首款云端富文本编辑器</h2>

  <p>
    您听说过 Tiny Cloud 吗？这是我们助力您打造卓越内容创作体验的第一步，无论您的专业水平如何。已有 50,000 名开发者加入。他们可以免费使用我们的全球内容分发网络 (CDN)、图像代理服务以及 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>&nbsp;</p>

  <p>
    这些用例仅仅是个开始。TinyMCE 具有极高的灵活性，且拥有数百个 API，很可能有适合您编辑器项目的解决方案。如果您尚未体验过 Tiny Cloud，请立即开始使用。您甚至可以免费试用高级插件，无需提供信用卡信息！
  </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_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY'
});