re #120 added codepen snippets

_includes/codepen.html

@@ -0,0 +1,6 @@
+<p data-height="{{ include.height | or:'660' }}" data-theme-id="0" data-slug-hash="{{ include.id }}" data-default-tab="{{ include.tab | or:'result' }}" data-user="tinymce" {% if include.preview %}data-preview="true"{% endif %} class="codepen">
+  See the Pen <a href='http://codepen.io/tinymce/pen/{{ include.id }}/'>{{ include.id }}</a>
+  by TinyMCE (<a href='http://codepen.io/tinymce'>@tinymce</a>)
+  on <a href='http://codepen.io'>CodePen</a>.
+</p>
+<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

try-tinymce/basic-example.md

@@ -6,6 +6,16 @@ description: This example contains the plugins needed for the most common use ca
 keywords: example custom common standard normal typical
 ---
 
-// working example to come
+## Live example
 
-// http://www.tinymce.com/tryit/basic.php
+This example outlines the basic functionalities of TinyMCE and lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+{% include codepen.html id="YydQrY" %}
+
+### Example breakdown
+
+> ```js
+toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
+```
+
+As you can se we can alter the [toolbar]({{ site.baseurl }}/configure/configure/editor-appearance/#toolbar) passing lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

try-tinymce/custom-toolbar-button.md

@@ -6,6 +6,4 @@ description: This example shows you how to add a custom button to the toolbar.
 keywords: example custom toolbar button
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/button.php
+{% include codepen.html id="NGegeZ" %}

try-tinymce/custom-toolbar-listbox.md

@@ -6,6 +6,4 @@ description: This example shows you how to add a simple listbox to the toolbar o
 keywords: example custom toolbar listbox
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/listbox.php
+{% include codepen.html id="JYwJVr" %}

try-tinymce/format-custom.md

@@ -6,6 +6,4 @@ description: This example shows you how to override the built in style formats a
 keywords: example custom format formats
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/custom_formats.php
+{% include codepen.html id="QjzgRW" %}

try-tinymce/format-html5.md

@@ -6,6 +6,4 @@ description: This example shows you how to edit HTML5 contents such as sections
 keywords: example custom format formats html5
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/html5_formats.php
+{% include codepen.html id="dYwREe" %}

try-tinymce/full-featured.md

@@ -6,6 +6,4 @@ description: This example displays all plugins that comes with the TinyMCE packa
 keywords: example custom wysiwyg full-power full-featured
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/full.php
+{% include codepen.html id="NGegZK" %}

try-tinymce/image-tools.md

@@ -6,6 +6,4 @@ description: This example contains the plugins needed for the most common use ca
 keywords: example custom imagetools
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/imagetools.php
+{% include codepen.html id="epbRwB" %}

try-tinymce/inline.md

@@ -6,6 +6,4 @@ description: This example shows you the inline editing capabilities of TinyMCE.
 keywords: example custom inline
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/inline.php
+{% include codepen.html id="YydQoj" %}

try-tinymce/url-conversion.md

@@ -6,6 +6,4 @@ description: This example shows you how to setup TinyMCE to produce different re
 keywords: example custom url conversion absolute relative url urls
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/url_conversion.php
+{% include codepen.html id="Qjzgew" height="1700" %}

try-tinymce/valid-elements.md

@@ -6,6 +6,4 @@ description: This example shows you how to use the extended_valid_elements optio
 keywords: example custom valid elements valid_elements
 ---
 
-// working example to come
-
-// http://www.tinymce.com/tryit/valid_elements.php
+{% include codepen.html id="LpMLwQ" %}