Question

Live example

This example shows you how to use Tiny Drive for your file and image management. For more information on the Tiny Drive plugin, see the docs.

TinyMCE HTML JS <h2>The world's first rich text editor in the cloud</h2> <p> Have you heard about Tiny Cloud? It's the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global Content Delivery Network, image proxy services and auto updates to the TinyMCE editor. They're also ready for some exciting updates coming soon. </p> <p> One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at our working demo, where you'll find an opportunity to provide feedback to the product team. </p> <h3>An editor for every project</h3> <p> Here are some of our customer's most common use cases for TinyMCE: </p> <ul> <li>Content Management Systems (WordPress, Umbraco)</li> <li>Learning Management Systems (Blackboard)</li> <li>Customer Relationship Management and marketing automation (Marketo)</li> <li>Email marketing (Constant Contact)</li> <li>Content creation in SaaS systems (Eventbrite, Evernote, GoFundMe, Zendesk)</li> </ul> <p> </p> <p> And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there's likely a solution for your editor project. If you haven't experienced Tiny Cloud, get started today. You'll even get a free premium plugin trial – no credit card required! </p>

<textarea id="drive-demo">
  <h2>The world's first rich text editor in the cloud</h2>

  <p>
    Have you heard about Tiny Cloud? It's the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global Content Delivery Network, image proxy services and auto updates to the TinyMCE editor. They're also ready for some exciting updates coming soon.
  </p>

  <p>
    One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at <a href="https://www.tiny.cloud/docs/plugins/drive/#liveexample">our working demo</a>, where you'll find an opportunity to provide feedback to the product team.
  </p>

  <h3>An editor for every project</h3>

  <p>
    Here are some of our customer's most common use cases for TinyMCE:
  </p>

  <ul>
    <li>Content Management Systems (<em>WordPress, Umbraco</em>)</li>
    <li>Learning Management Systems (<em>Blackboard</em>)</li>
    <li>Customer Relationship Management and marketing automation (<em>Marketo</em>)</li>
    <li>Email marketing (<em>Constant Contact</em>)</li>
    <li>Content creation in SaaS systems (<em>Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
  </ul>

  <p>&nbsp;</p>

  <p>
    And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there's likely a solution for your editor project. If you haven't experienced Tiny Cloud, get started today. You'll even get a free premium plugin trial &ndash; no credit card required!
  </p>
</textarea>

tinymce.init({
  selector: 'textarea#drive-demo',
  plugins: 'image media link tinydrive code imagetools',
  api_key: 'YOUR_API_KEY',
  height: 600,
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  toolbar: 'insertfile image link | code'
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName("ie11_optional")[0] !== undefined) { document.getElementsByClassName("ie11_optional")[0].style.display = 'none'; } })(); (function() { tinymce.init({ selector: 'textarea#drive-demo', plugins: 'image media link tinydrive code imagetools', api_key: 'fake-key', content_css: [ "//fonts.googleapis.com/css?family=Lato|Lobster|Noto+Serif|Permanent+Marker|Raleway|Roboto|Source+Code+Pro", "//tiny.cloud/css/content-standard.min.css" ], height: 600, imagetools_cors_hosts: ['picsum.photos'], tinydrive_token_provider: function (success, failure) { success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' }); }, tinydrive_demo_files_url: '/docs/demo/tiny-drive-demo/demo_files.json', toolbar: 'insertfile image link | code' }); })(); (function() { /* TODO: more js, less jekyll */ var id = "drive-demo"; var html = decodeURIComponent("%0A%3Ctextarea%20id=%22drive-demo%22%3E%0A%20%20%3Ch2%3EThe%20world's%20first%20rich%20text%20editor%20in%20the%20cloud%3C/h2%3E%0A%0A%20%20%3Cp%3E%0A%20%20%20%20Have%20you%20heard%20about%20Tiny%20Cloud?%20It's%20the%20first%20step%20in%20our%20journey%20to%20help%20you%20deliver%20great%20content%20creation%20experiences,%20no%20matter%20your%20level%20of%20expertise.%2050,000%20developers%20already%20agree.%20They%20get%20free%20access%20to%20our%20global%20Content%20Delivery%20Network,%20image%20proxy%20services%20and%20auto%20updates%20to%20the%20TinyMCE%20editor.%20They're%20also%20ready%20for%20some%20exciting%20updates%20coming%20soon.%0A%20%20%3C/p%3E%0A%0A%20%20%3Cp%3E%0A%20%20%20%20One%20of%20these%20enhancements%20is%20%3Cstrong%3ETiny%20Drive%3C/strong%3E:%20imagine%20file%20management%20for%20TinyMCE,%20in%20the%20cloud,%20made%20super%20easy.%20Learn%20more%20at%20%3Ca%20href=%22https://www.tiny.cloud/docs/plugins/drive/#liveexample%22%3Eour%20working%20demo%3C/a%3E,%20where%20you'll%20find%20an%20opportunity%20to%20provide%20feedback%20to%20the%20product%20team.%0A%20%20%3C/p%3E%0A%0A%20%20%3Ch3%3EAn%20editor%20for%20every%20project%3C/h3%3E%0A%0A%20%20%3Cp%3E%0A%20%20%20%20Here%20are%20some%20of%20our%20customer's%20most%20common%20use%20cases%20for%20TinyMCE:%0A%20%20%3C/p%3E%0A%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EContent%20Management%20Systems%20(%3Cem%3EWordPress,%20Umbraco%3C/em%3E)%3C/li%3E%0A%20%20%20%20%3Cli%3ELearning%20Management%20Systems%20(%3Cem%3EBlackboard%3C/em%3E)%3C/li%3E%0A%20%20%20%20%3Cli%3ECustomer%20Relationship%20Management%20and%20marketing%20automation%20(%3Cem%3EMarketo%3C/em%3E)%3C/li%3E%0A%20%20%20%20%3Cli%3EEmail%20marketing%20(%3Cem%3EConstant%20Contact%3C/em%3E)%3C/li%3E%0A%20%20%20%20%3Cli%3EContent%20creation%20in%20SaaS%20systems%20(%3Cem%3EEventbrite,%20Evernote,%20GoFundMe,%20Zendesk%3C/em%3E)%3C/li%3E%0A%20%20%3C/ul%3E%0A%0A%20%20%3Cp%3E %3C/p%3E%0A%0A%20%20%3Cp%3E%0A%20%20%20%20And%20those%20use%20cases%20are%20just%20the%20start.%20TinyMCE%20is%20incredibly%20flexible,%20and%20with%20hundreds%20of%20APIs%20there's%20likely%20a%20solution%20for%20your%20editor%20project.%20If%20you%20haven't%20experienced%20Tiny%20Cloud,%20get%20started%20today.%20You'll%20even%20get%20a%20free%20premium%20plugin%20trial%20–%20no%20credit%20card%20required!%0A%20%20%3C/p%3E%0A%3C/textarea%3E%0A"); var js = decodeURIComponent("%0Atinymce.init(%7B%0A%20%20selector:%20'textarea#drive-demo',%0A%20%20plugins:%20'image%20media%20link%20tinydrive%20code%20imagetools',%0A%20%20api_key:%20'fake-key',%0A%20%20content_css:%20[%0A%20%20%20%20%22//fonts.googleapis.com/css?family=Lato%7CLobster%7CNoto+Serif%7CPermanent+Marker%7CRaleway%7CRoboto%7CSource+Code+Pro%22,%0A%20%20%20%20%22//tiny.cloud/css/content-standard.min.css%22%0A%20%20],%0A%20%20height:%20600,%0A%20%20imagetools_cors_hosts:%20['picsum.photos'],%0A%20%20tinydrive_token_provider:%20function%20(success,%20failure)%20%7B%0A%20%20%20%20success(%7B%20token:%20'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo'%20%7D);%0A%20%20%7D,%0A%20%20tinydrive_demo_files_url:%20'/docs/demo/tiny-drive-demo/demo_files.json',%0A%20%20toolbar:%20'insertfile%20image%20link%20%7C%20code'%0A%7D);%0A"); var css = ""; var tabNames = ["run","html","js"]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: "TinyMCE Example", description: '', html: html, css: css, css_external: 'https://www.tiny.cloud/css/codepen.min.css', js: js, js_external: 'https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc' }; document.getElementById("codepen_data_drive-demo").value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById("codepen_tab_" + t + "_" + id), pane: document.getElementById("codepen_pane_" + t + "_" + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? 'block' : 'none'; tt.tab.className = t === tt ? 'codepen_tab_selected' : 'codepen_tab_deselected'; }); e.preventDefault(); }; }); if (document.getElementById("codepen_tab_codepen_" + id) !== null) { document.getElementById("codepen_tab_codepen_" + id).onclick = function() { document.getElementById("codepen_form_" + id).submit(); }; } })();

Code:

tinymce.init({
  selector: 'textarea',
  plugins: 'image media link tinydrive code imagetools',
  api_key: 'YOUR_API_KEY',
  height: 600,
  tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
  toolbar: 'insertfile image link | code'
});