Is it possible to get the HTML from a editable CodePen Embed?
I tried to get the iFrame Content but it's restricted. Also no luck with postMessage.
Simple example for the embed pen:
<div
class="codepen"
data-prefill
data-height="400"
data-theme-id="1"
data-default-tab="html,result"
data-editable="true"
>
<pre data-lang="html">
<div class="module">
<h3>Module Title</h3>
<p>This little piggy went to market.</p>
</div>
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
The trick was to use window.parent.parent.postMessage().
<script>
window.addEventListener('message', function(event) {
console.log(event.data); // the html
});
</script>
<div
class="codepen"
data-prefill
data-height="400"
data-theme-id="31205"
data-editable="true"
data-default-tab="html,result"
>
<pre data-lang="js">window.parent.parent.postMessage(document.body.children[0].outerHTML, '*');</pre>
<pre data-lang="html">
<div class="module">
<h3>Module Title</h3>
<p>This little piggy went to market.</p>
</div>
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>