April 25th, 2006

Create a Code Preview Box on Your Website

DHTML Code, JavaScript Code

If you post any client-side code on your website, it would be nice for people to be able to work with it and test or preview it live. This code uses an iframe to enable real-time viewing of your code. You could use this simply as a DHTML code editor, or you could even extend it to create your own WYSIWYG editor for your web application!

If you receive a JavaScript permission error when you're putting this on a test page, try closing and opening the page instead of just hitting refresh.

Here's an example of it in use:
<div align="center">
  <table style="width:500px; border:solid 1px #666;background:#f8f8f8">
    <tr>
      <td valign="top"><form name="form1">
          <textarea name="code" wrap="soft" onclick="focus(this.code);"
                  style="border:solid 1px #999; padding:5px; width:250px; height:264px; scroll:auto;">
                        my test code
                </textarea>
        </form></td>
      <td valign="top">
          <iframe src="about:blank" name="preview"
                 style="border:solid 1px #999;height:275px; width:250px; background:#ffffff" frameborder="0"></iframe>
        </td>
    </tr>
  </table>
  <input type="button" value="run code!"
   onclick="preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
  <input type="button" value="clear"
   onclick="document.form1.code.value=";preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
</div>

Leave a reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image