Tiny Drive configuration

Configuring with TinyMCE

tinydrive_token_provider

This setting could take one of the following two forms:

• A URL to a page that takes an HTTP JSON POST request and produces a JSON structure with a valid JWT. It uses a POST request to avoid caching by browsers and proxies.
• A function that provides the same token through a callback. This allows making an HTTP request in any desired format. The provider function is a function that has a success and failure callback where the success takes an object with a token property containing the JWT, and the failure callback takes a string to present as an error message if the token could not be produced.

For more information on how to create these tokens, refer to the JWT authentication guide or try one of the starter projects.

Type: String or Function

Required: yes

Example Using a JWT Provider URL

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_token_provider: '/jwt' // this can be a page or endpoint like this
});

Example Using a JWT Provider Callback

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_token_provider: function (success, failure) {
     success({ token: 'jwt-token' });
     // failure('Could not create a jwt token')
  }
});

tinydrive_upload_path

This setting enables changing the default upload path for files that get uploaded when pasted into the editor, uploaded directly through the Image dialog, or when an image is dragged-and-dropped into the editor. It will produce a date-based structure within this path like this /uploads/{year}{month}{day}. This is to avoid having thousands of files in the same directory.

Type: String

Default Value: "/uploads"

Example: Using tinydrive_upload_path

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_upload_path: '/some/other/path'
});

tinydrive_max_image_dimension

This setting enables constraining the width/height of uploaded images. When this is enabled any images with a higher width or height than the specified amount would be proportionally resized down to the specified maximum dimension.

Type: Number

Example: Using tinydrive_max_image_dimension

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_max_image_dimension: 1024
});

Configuring the Tiny Drive UI

tinydrive_skin

This option sets the skin applied to Tiny Drive. The default skin included with Tiny Drive is named “oxide”.

Type: String

Default Value: 'oxide'

Possible Values: 'oxide', 'oxide-dark'

If the tinydrive_skin option is not specified, Tiny Drive will try and use the skin specified by the TinyMCE skin option before falling back to the default “oxide” skin.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_skin: 'oxide-dark'
});

Configuring the Insert File toolbar button

Tiny Drive will automatically integrate into the Image, Link, and Media dialogs as a file picker. It can also be configured to insert files directly into any content using the insertfile button. To enable this button, add it to the toolbar editor setting.

The Insert File toolbar button will insert images as img elements or other files as links to that file.

Example: Adding the insertfile toolbar button

This is an example of configuring the ‘insertfile’ toolbar button.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  toolbar: 'insertfile'
});

Configuring with Dropbox

tinydrive_dropbox_app_key

This setting enables specifying the Dropbox API key for integrating dropbox into Tiny Drive. For more information on how you obtain this key, refer to the Dropbox integration guide.

Type: string

Example: Using tinydrive_dropbox_app_key

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_dropbox_app_key: '<your dropbox app key>'
});

Configuring with Google Drive

tinydrive_google_drive_key

This setting enables specifying the Google Drive API key for integrating Google Drive into Tiny Drive. For more information on how you obtain this key, refer to the Google Drive integration guide.

Type: string

Example: Using tinydrive_google_drive_key

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_google_drive_key: '<your google drive api key>'
});

tinydrive_google_drive_client_id

This setting enables specifying the Google Drive client ID for integrating Google Drive into Tiny Drive. For more information on how you obtain this ID, refer to the Google Drive integration guide.

Type: string

Example: Using tinydrive_google_drive_client_id

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinydrive',
  tinydrive_google_drive_client_id: '<your google drive client id>'
});

Toolbar buttons

The Tiny Drive plugin provides the following toolbar buttons:

These toolbar buttons can be added to the editor using:

• The toolbar configuration option.
• The quickbars_insert_toolbar configuration option.
• Custom Context toolbars.

Menu items

The Tiny Drive plugin provides the following menu items:

These menu items can be added to the editor using:

• The menu configuration option.
• The contextmenu configuration option.
• Custom Menu toolbar buttons.

Need help?

Tiny is striving to make Tiny Drive as useful and simple as possible. For support related issues such as problems with JWT authentication and implementing Tiny Drive, check the help page or please contact Tiny Support.

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.