NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.
Overview
Tiny Drive enables you to import files from any Google Drive account if you setup the google drive integration by providing Google credentials. When the user selects a file from Google Drive, it will instantly be uploaded or imported into the Tiny Drive storage so that it can be viewed online and shared through Tiny Drive. Documents picked from Google Drive will be converted to PDF Files within Tiny Drive.
Prerequisites
- A valid Google Drive user account is required for integrating Google Drive with Tiny Drive. Refer to this Google Drive link for more information on creating a Google Drive user account.
- The Google Drive API should be enabled. Refer to this Google Drive link for more information on enabling the Google Drive API.
- The Google Picker API should be enabled. Refer to this Google Drive link for more information on enabling the Google Picker API.
Obtaining the API Key and Client ID
You can obtain the Google Drive credentials by following the steps below.
1. Create the Google API Key
- Open the Google Console Credentials page
- Click on the
Create credentials
button. - Click on the
API key
item.
2. Copy the new Google API Key
Copy the generated Google API key this will later be used to configure Tiny Drive:
3. Create the OAuth client ID
Click on the Create credentials
button then on OAuth client ID
item:
4. Fill in the OAuth details
- Select
Web application
fromApplication type
- Add your domains to
Authorized JavaScript origins
. - Click
create
. - Copy the created
client id
it will be used later to configure Tiny Drive.
5. Restrict Client ID API access
- Click the edit icons for the Client ID you created
- Click on the
API restrictions
tab - Click on the
Select API
dropdown - Select
Google Picker API
from the dropdown - Click
Save
6. Configure tinydrive to use the new Google Drive credentials
The Google Drive API key can be configured by setting the tinydrive_google_drive_key. The Google OAuth client ID can be configured by setting the tinydrive_google_drive_client_id.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'tinydrive',
tinydrive_google_drive_key: '<your google api key>',
tinydrive_google_drive_client_id: '<your google drive OAuth client ID>'
});
For more information on other Tiny Drive config options refer to the configuration section of this document.
7. Tiny Drive UI
- From the TinyMCE user interface, click on the
button to access the Tiny Drive user interface.
- Click on the
button to select Google Drive from the list of storages.
- Select the file to upload/import from Google Drive by clicking on the radio button next to it. Alternatively, to directly insert the file into the editor, double-click on it.
- Choose Save to upload/import the selected file/files to Tiny Drive.
Result: You should be able to view the selected files in your Tiny Drive storage.
Other file options
The following other options can be performed to the selected file :
- Follow the steps from 1-3 of the Tiny Drive UI procedure.
- Choose from the options below as per the requirement:
- Choose Star to flag important files and view the starred file under the Star tab in the Google Drive Home tab.
- Choose Download to download the selected file/files.
- Choose Delete to remove the selected file/files from the Google Drive.
Read more about these options here.
Interactive example
Here is an interactive example of Google Drive enabled on Tiny Drive.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.