Tag Archives: interactive

Interactive HTML and CSS editor in WordPress

Guest post

I love jsfiddle, it is a great tool to share and quickly try a code snippet. However, it is a separate page and we wanted something we could directly include in a WordPress blog post.

How to include it

You need two textarea input fields in a form for the html and css code, respectively:

<form>
<textarea class="textarea_text" id="htmlcode1" oninput="update(1);">
  <div>Example text.</div>
</textarea>

<textarea class="textarea_text" id="csscode1" oninput="update(1);">
  div {background-color: #bdd}
</textarea>
</form>

You can already enter some code which will appear as default. To show the result, an iframe is used:

<iframe id="output1" class="textarea_output" src="data:text/css;base64,UGxlYXNlIGVuYWJsZSBqYXZhc2NyaXB0Lg=="></iframe>

Instead of the iframe, a div could also be used. However, in that case the css from your blog would mix with the additional rules from the text input, which is normally not what we want.

To directly include the following javascript code in your blog entry, you can install the Inline Javascript Plugin. Now you can insert this code at the end of your blog entry:

[inline]
[script type="text/javascript"]

var myframe = [];
var mycsslink = [];
var PREV_NUM = 1; // number of preview iframes

// init
window.onload = function() {
  for (var num=1; num<=PREV_NUM; num++) {
    myframe[num] = document.getElementById('output'+num);
    mycsslink[num] = document.createElement("link");
    mycsslink[num].rel = "stylesheet";
    mycsslink[num].type = "text/css";
    update(num);
    myframe[num].contentDocument.documentElement.appendChild(mycsslink[num]);
  }
}

// update output when input has changed
function update(num) {
  myframe[num].contentDocument.documentElement.innerHTML = "<head><link rel=\"stylesheet\" href=\"data:text/css;base64," + btoa(document.getElementById("csscode"+num).value) + "\"></head><body>";
  myframe[num].contentDocument.documentElement.innerHTML += document.getElementById("htmlcode"+num).value;
  myframe[num].contentDocument.documentElement.innerHTML += "</body></html>";
}

[/script]
[/inline]

If you would like to include multiple preview iframes, you can increase the numbers of the ids htmlcode1, csscode1 and output1, the number in the update call and finally adjust the constant PREV_NUM in the javascript code. Beware to not show multiple blog entries with the same numbers on a single page.

How it works

The updating of the iframe content code is a bit special. An external content is used via a data URI with base64 encoding. This is done because with normal inclusion of css the styles seemed to keep existing even when the css was removed. If you find an easier solution, please let me know! The src attribute contains a message to tell the user to enable javascript, you can easily replace it e.g. using an online base64 converter such as this one.

Issues

Currently, this does not seem to work on iOS (tested on an iPad). I have no experience debugging on that platform, if you do, please let us know!

Live demo

Here is a live demo demonstrating the code above, with some styling added to make it look nicer:
HTML

CSS

OUTPUT: