HTML Editor

by Lazaro Contreras

HTML

<p style="display:block;">Edit This Code:</p>
<button id="See" style="display:block;">See Result »</button>
<textarea id="edit"></textarea>
<iframe id="preview" name="preview"></iframe>

CSS

#edit{
  overflow:auto;
  width:45%;
  height:300px;
  border:none;
  resize: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
#preview{
  overflow:auto;
  width:50%;
  height:300px;
  border:none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }

JavaScript

var See = document.getElementById('See');
See.addEventListener('click',preview,false);
function preview() {
var edit = document.getElementById('edit');
var iframe = window.frames["preview"].document;
iframe.open();
iframe.write(edit.value);
iframe.close();
}