Media Optimizer (Files and Documents)

This plugin is only available for paid TinyMCE subscriptions.

Overview

The Documents feature of the Media Optimizer’s Files and Documents feature plugin enables users to upload and link document files (PDF, Word, Excel, PowerPoint, and more) directly within the editor through the Link plugin’s dialog. The plugin automatically configures the necessary options to enable file uploads in the link dialog when both the Media Optimizer’s Files and Documents feature plugin and the Link plugin are enabled.

Key benefits

  • Upload and link document files directly within the editor

  • Support for a wide range of file types including documents, iWork files, audio files, and archives

  • Automatic configuration of file upload handlers when both plugins are enabled

  • Secure file uploads through Uploadcare’s infrastructure

  • Customizable list of supported file types

  • Drag-and-drop file upload support

  • URL-based file linking

Interactive example

  • TinyMCE

  • HTML

  • JS

<textarea id="uploadcare-documents">
  <h1>Streamline Your Document Workflow: Professional File Management Made Simple</h1>
  <p><span style="color: #4e5c73;">In today&rsquo;s digital workspace, managing documents efficiently isn&rsquo;t just a convenience&mdash;it&rsquo;s essential for productivity. Whether you&rsquo;re sharing reports, distributing resources, or linking to important files, the Media Optimizer plugin transforms how you handle document uploads and file management.&nbsp;</span></p>
  <p>With seamless integration through the Link plugin&rsquo;s dialog, uploading and linking documents has never been easier. Simply click the Link button, navigate to the Upload tab, and your files are processed through Uploadcare&rsquo;s secure infrastructure&mdash;ready to share in seconds.</p>
  <blockquote><em>"Document file uploads have become a cornerstone of modern content management, enabling teams to share resources effortlessly while maintaining professional standards,"</em> &mdash; Sarah Chen, Content Strategy Director at Digital Solutions Inc.</blockquote>
  <p>According to recent workflow analysis, teams that implement streamlined document upload processes see an average improvement of 40% in content creation efficiency. This enhanced productivity, combined with secure file handling and automatic optimization, makes document file uploads an essential feature for any content management system.&nbsp;</p>
  <h2>Experience Seamless Document Uploads</h2>
  <p class="p1">Before we explore the comprehensive file type support, let&rsquo;s understand how document uploads work in practice.</p>
  <p class="p1">The Media Optimizer plugin automatically configures everything you need when both the uploadcare and link plugins are enabled. Simply select your file, and it&rsquo;s uploaded, processed, and linked automatically&mdash;no complex setup required.</p>
  <h2 class="p1">Comprehensive File Type Support: Your Documents, Your Way&nbsp;</h2>
  <p>The Media Optimizer plugin supports an extensive range of file types, ensuring you can upload and link virtually any document your team needs:</p>
  <ul>
    <li><strong>Office Documents:</strong> PDF, Word (doc, docx), Excel (xls, xlsx), PowerPoint (ppt, pps, pptx), RTF, and plain text files</li>
    <li><strong>iWork Files:</strong> Keynote presentations, Pages documents, and Numbers spreadsheets</li>
    <li><strong>Audio Files:</strong> WAV, MP3, and OGG formats for multimedia content</li>
    <li><strong>Archive Files:</strong> ZIP, GZIP, TAR, TAR.GZ, 7Z, and RAR for compressed content distribution</li>
  </ul>
  <p>This comprehensive support means you can handle everything from quarterly reports and presentation decks to audio guides and resource archives&mdash;all through a single, unified interface.</p>
  <h2>Real-World Applications</h2>
  <p>Document file uploads are perfect for a wide variety of professional scenarios:</p>
  <ul>
    <li><strong>Knowledge Base Management:</strong> Share technical documentation, user guides, and reference materials</li>
    <li><strong>Resource Distribution:</strong> Provide downloadable whitepapers, case studies, and marketing materials</li>
    <li><strong>Collaborative Workflows:</strong> Enable team members to upload and share project files, templates, and assets</li>
    <li><strong>Content Enrichment:</strong> Link to supplementary materials, audio guides, and multimedia resources</li>
  </ul>
  <p>Every uploaded file is processed through Uploadcare&rsquo;s enterprise-grade infrastructure, ensuring secure storage, fast delivery, and reliable access for your users.</p>
  <h2>Get Started Today</h2>
  <p>Ready to transform your document management workflow? Try uploading a document now using the Link button in the toolbar. Click the Link button, select the Upload tab, and experience the simplicity of professional file management.</p>
</textarea>
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link',
  toolbar: 'link',
  uploadcare_public_key: '<your-public-key>',
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] },
    { mimeType: 'application/vnd.apple.keynote', extensions: [ 'key' ] },
    { mimeType: 'application/vnd.apple.pages', extensions: [ 'pages' ] },
    { mimeType: 'application/vnd.apple.numbers', extensions: [ 'numbers' ] },
    { mimeType: 'audio/wav', extensions: [ 'wav', 'wave' ] },
    { mimeType: 'audio/mpeg', extensions: [ 'mp3' ] },
    { mimeType: 'audio/ogg', extensions: [ 'ogg' ] },
    { mimeType: 'application/zip', extensions: [ 'zip' ] },
    { mimeType: 'application/gzip', extensions: [ 'gz', 'gzip' ] },
    { mimeType: 'application/x-tar', extensions: [ 'tar' ] },
    { mimeType: 'application/x-gtar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-compressed-tar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-7z-compressed', extensions: [ '7z' ] },
    { mimeType: 'application/vnd.rar', extensions: [ 'rar' ] }
  ]
});

Basic setup

To enable document file uploads, include both uploadcare and link in the plugins option in the editor configuration. The Media Optimizer’s Files and Documents feature plugin will automatically configure the necessary options to enable file uploads in the link dialog.

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link',
  toolbar: 'link',
  uploadcare_public_key: '<your-public-key>',
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] },
    { mimeType: 'application/vnd.apple.keynote', extensions: [ 'key' ] },
    { mimeType: 'application/vnd.apple.pages', extensions: [ 'pages' ] },
    { mimeType: 'application/vnd.apple.numbers', extensions: [ 'numbers' ] },
    { mimeType: 'audio/wav', extensions: [ 'wav', 'wave' ] },
    { mimeType: 'audio/mpeg', extensions: [ 'mp3' ] },
    { mimeType: 'audio/ogg', extensions: [ 'ogg' ] },
    { mimeType: 'application/zip', extensions: [ 'zip' ] },
    { mimeType: 'application/gzip', extensions: [ 'gz', 'gzip' ] },
    { mimeType: 'application/x-tar', extensions: [ 'tar' ] },
    { mimeType: 'application/x-gtar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-compressed-tar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-7z-compressed', extensions: [ '7z' ] },
    { mimeType: 'application/vnd.rar', extensions: [ 'rar' ] }
  ]
});

The Media Optimizer’s Files and Documents feature plugin automatically configures the files_upload_handler and documents_file_types options when both the Link plugin and the Media Optimizer’s Files and Documents feature plugin are enabled. This enables file uploads in the Link dialog without requiring manual configuration. However, you can customize the list of supported file types by explicitly setting the documents_file_types option as shown in the example above.

Document Operations

Below is an overview of the features provided by the Media Optimizer’s Files and Documents feature plugin for document file uploads:

Toolbar button Icon Description

link

link.svg

Opens the Insert/edit link dialog so the user can upload with file picker or dropping file to be uploaded. Uploaded files are processed through Uploadcare’s infrastructure and automatically linked in the content.

The Media Optimizer’s Files and Documents feature plugin supports a comprehensive list of file types:

  • Documents: PDF, Word (doc, docx), Excel (xls, xlsx), PowerPoint (ppt, pps, pptx), RTF, plain text (txt)

  • iWork files: Keynote (key), Pages (pages), Numbers (numbers)

  • Audio files: WAV (wav, wave), MP3 (mp3), OGG (ogg)

  • Archive files: ZIP (zip), GZIP (gz, gzip), TAR (tar), TAR.GZ (tar.gz, tgz), 7Z (7z), RAR (rar)

When both the Media Optimizer’s Files and Documents feature plugin and the Link plugin are enabled, the Link dialog displays an "Upload" tab that enables file uploads. Users can upload files via drag-and-drop, file selection, or by providing a URL. Uploaded files are processed through Uploadcare’s infrastructure and automatically linked in the content.

Options

The following configuration options affect the behavior of the Files and Documents feature:

documents_file_types

This option specifies which file types (MIME types and extensions) are supported for file uploads in the link dialog when using the Media Optimizer plugin. When both the Link plugin and the Media Optimizer plugin are enabled, the Media Optimizer plugin automatically configures this option to enable file uploads in the link dialog.

The option should be a non-empty array of objects, where each object contains:

  • mimeType - A string representing the MIME type (e.g., 'application/pdf')

  • extensions - An array of strings representing the file extensions (e.g., ['pdf'])

If documents_file_types is set to an empty array or is not a valid array of objects matching the configuration schema, the Media Optimizer plugin will throw an error: "Must be a non-empty array of objects matching the configuration schema."

When the Media Optimizer plugin is enabled with the link plugin, it automatically sets a default list of supported file types. The default list includes:

  • Documents: PDF, Word (doc, docx), Excel (xls, xlsx), PowerPoint (ppt, pps, pptx), RTF, plain text (txt)

  • iWork files: Keynote (key), Pages (pages), Numbers (numbers)

  • Audio files: WAV (wav, wave), MP3 (mp3), OGG (ogg)

  • Archive files: ZIP (zip), GZIP (gz, gzip), TAR (tar), TAR.GZ (tar.gz, tgz), 7Z (7z), RAR (rar)

This list can be customized by setting documents_file_types manually in the editor configuration.

Type: Array

Default value: undefined.

The Media Optimizer plugin automatically configures this option when both the link plugin and the Media Optimizer plugin are enabled. The automatically configured list includes documents, iWork files, audio files, and archive files.

Priority Behavior

When documents_file_types is set, it acts as the source of truth for supported file types throughout the editor. This means:

  • The Link plugin uses this custom list instead of its default supported file types

  • The Media Optimizer plugin also uses this list to determine which mimeType values are allowed for file uploads when both the link plugin and the Media Optimizer plugin are enabled as they share the same list of supported file types via this option.

    • If a MIME type is blocked by the Uploadcare dashboard on the server side, the MIME type will also be blocked on the client side regardless of whether documents_file_types is set, resulting in an error message such as "File type not allowed" or "File type not supported".

If documents_file_types is not set:

  • The Link plugin uses its default list of supported file types

  • The Media Optimizer plugin uses its own default list of supported file types (as listed above)

Example: Using documents_file_types with Media Optimizer

This example shows how to customize the file types when using the Media Optimizer plugin with the Link plugin:

tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare link',
  toolbar: 'link',
  uploadcare_public_key: '<your-public-key>',
  documents_file_types: [
    { mimeType: 'application/msword', extensions: [ 'doc' ] },
    { mimeType: 'application/vnd.ms-excel', extensions: [ 'xls' ] },
    { mimeType: 'application/vnd.ms-powerpoint', extensions: [ 'ppt', 'pps' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', extensions: [ 'docx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', extensions: [ 'xlsx' ] },
    { mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', extensions: [ 'pptx' ] },
    { mimeType: 'application/pdf', extensions: [ 'pdf' ] },
    { mimeType: 'application/rtf', extensions: [ 'rtf' ] },
    { mimeType: 'text/plain', extensions: [ 'txt' ] },
    { mimeType: 'application/vnd.apple.keynote', extensions: [ 'key' ] },
    { mimeType: 'application/vnd.apple.pages', extensions: [ 'pages' ] },
    { mimeType: 'application/vnd.apple.numbers', extensions: [ 'numbers' ] },
    { mimeType: 'audio/wav', extensions: [ 'wav', 'wave' ] },
    { mimeType: 'audio/mpeg', extensions: [ 'mp3' ] },
    { mimeType: 'audio/ogg', extensions: [ 'ogg' ] },
    { mimeType: 'application/zip', extensions: [ 'zip' ] },
    { mimeType: 'application/gzip', extensions: [ 'gz', 'gzip' ] },
    { mimeType: 'application/x-tar', extensions: [ 'tar' ] },
    { mimeType: 'application/x-gtar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-compressed-tar', extensions: [ 'tar.gz', 'tgz' ] },
    { mimeType: 'application/x-7z-compressed', extensions: [ '7z' ] },
    { mimeType: 'application/vnd.rar', extensions: [ 'rar' ] }
  ]
});

This option is part of the Link plugin and can also be configured independently. For more information about file upload configuration, see documents_file_types in the Link plugin documentation.

Toolbar buttons

The Media Optimizer’s Files and Documents feature plugin provides the following toolbar buttons:

Identifier Description

link

Opens the Insert/edit link dialog so the user can upload files via file picker or by dropping files to be uploaded. Uploaded files are processed through Uploadcare’s infrastructure and automatically linked in the content.

These toolbar buttons can be added to the editor using:

The Media Optimizer’s Files and Documents feature plugin provides the following menu items:

Identifier Description

link

Opens the Insert/edit link dialog so the user can upload files via file picker or by dropping files to be uploaded. Uploaded files are processed through Uploadcare’s infrastructure and automatically linked in the content.

These menu items can be added to the editor using: