DHTML Code, JavaScript Code

Create a Code Preview Box on Your Website

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>
Share

1 Comments

  1. do you think its possible to open "preview" in new window? if yes, how? thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image