WEBSITE-798: create demo for drive plugin page, adding example.js view, which is a false front for index.js

_includes/codepen.html

@@ -14,6 +14,7 @@ Files required under _includes/codepens/id/
 index.html
 index.js
 index.css
+example.js optional file, when present the displayed JS tab example will use example.js, while the real code executes with index.js
 
 {% endcomment %}
 
@@ -25,7 +26,11 @@ index.css
 {% endcapture %}
 
 {% capture codepen_js %}
-{% include codepens/{{ include.id }}/index.js %}
+    {% if exists codepens/{{ include.id }}/example.js %}
+        {% include codepens/{{ include.id }}/example.js %}
+    {% else %}
+        {% include codepens/{{ include.id }}/index.js %}
+    {% endif %}
 {% endcapture %}
 
 {% capture codepen_css %}

_includes/codepens/drive/example.js

@@ -0,0 +1,4 @@
+tinymce.init({
+  selector: 'textarea',
+  testing: 'i am fake'
+});

_includes/codepens/drive/index.html

@@ -0,0 +1,59 @@
+<textarea>
+  <p style="text-align: center;">
+    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
+  </p>
+
+  <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1>
+
+  <p>
+    Please try out the features provided in this basic example.<br>
+    Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering – the demo is to show the integration.
+  </p>
+
+  <h2>Got questions or need help?</h2>
+
+  <ul>
+    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
+    <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
+    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
+  </ul>
+
+  <h2>A simple table to play with</h2>
+
+  <table style="text-align: center;">
+    <thead>
+      <tr>
+        <th>Product</th>
+        <th>Cost</th>
+        <th>Really?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>TinyMCE</td>
+        <td>Free</td>
+        <td>YES!</td>
+      </tr>
+      <tr>
+        <td>Plupload</td>
+        <td>Free</td>
+        <td>YES!</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Found a bug?</h2>
+
+  <p>
+    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
+  </p>
+
+  <h2>Finally ...</h2>
+
+  <p>
+    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
+  </p>
+  <p>
+    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
+  </p>
+</textarea>

_includes/codepens/drive/index.js

@@ -0,0 +1,20 @@
+tinymce.init({
+  selector: 'textarea',
+  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: (success, failure) => {
+    success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' });
+  },
+  tinydrive_demo_files_url: '{{ site.baseurl }}/demo/tiny-drive-demo/demo_files.json',
+  toolbar: 'insertfile image link | code',
+  content_css: [
+    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
+    '//www.tiny.cloud/css/codepen.min.css'
+  ]
+});

_includes/codepens/drive/style.css

@@ -0,0 +1,6 @@
+button.olark-launch-button {
+  z-index: 1 !important;
+}
+.menu {
+  z-index: 1000 !important;
+}

plugins/drive.md

@@ -13,6 +13,10 @@ To enable this functionality, add `tinydrive` to the list of plugins in the `tin
 Once you enable Drive it integrates as the default file picker for the Image, Link, and Media dialogs and as the default upload handler for local images being pasted or inserted into the document.
 
 
+## Live example
+
+{% include codepen.html id="drive" %}
+
 ### Example
 
 ```js