add live demo template

Author: Sorita Heng

modules/ROOT/examples/live-demos/trackchanges/example.js

@@ -0,0 +1,30 @@
+/*
+
+This file is not normally required.
+
+Sometimes, however, a plugin, or a particular feature of a plugin,
+requires a back-end service.
+
+In these cases, creating a working demo requires setting up an
+emulated version of this service.
+
+And `example.js` is part of this emulation.
+
+`index.js` still runs the live demo.
+
+But `example.js` is what is displayed in the *js* tab of the
+live-demo interface on the built docs site.
+
+So `example.js` has to be a working equivalent to `index.js` *if*
+`index.js` was wired up in a standard way, to its required back-end
+service.
+
+NB: there is one UX consequence of setting up demos to work in
+these cases. The *Edit on CodePen* tab does not — and cannot —
+present in the documentation.
+
+The initial setup of these ‘includes-an-emulated-back-end’ examples
+will almost certainly include significant initial input from the
+plugin’s developer.
+
+*/

modules/ROOT/examples/live-demos/trackchanges/index.html

@@ -0,0 +1,15 @@
+<textarea id="<plugincode>">
+  {{logofordemoshtml}}
+
+<!-- example html here -->
+
+  <h2>Found a bug?</h2>
+
+  <p>If you believe 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 <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
+  <p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
+  <p>All the best from the TinyMCE team.</p>
+</textarea>

modules/ROOT/examples/live-demos/trackchanges/index.js

@@ -0,0 +1,16 @@
+tinymce.init({
+  selector: 'textarea#<plugincode>',
+// below is a basic 6.x working configuration.
+// Do not assume it is suitable for demonstrating the plugin to be documented.
+  height: 500,
+  plugins: [
+    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+    'insertdatetime', 'media', 'table', 'help', 'wordcount'
+  ],
+  toolbar: 'undo redo | blocks | ' +
+  'bold italic backcolor | alignleft aligncenter ' +
+  'alignright alignjustify | bullist numlist outdent indent | ' +
+  'removeformat | help',
+  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
+});

modules/ROOT/pages/trackchanges.adoc

@@ -15,6 +15,10 @@ The Track Changes plugin allows users to easily review and manage changes made t
 
 == Interactive example
 
+liveDemo::{plugincode}[]
+
+include::partial$misc/admon-iframe-only.adoc[]
+
 == How it works
 
 == Basic setup