HTML edition aid

An HTML source editor with an usable preview and a litle of WYSIWYG

by Juan Lanus

HTML

<script src="http://dreamchain.com/static/split-pane/split-pane.js"></script>
<link rel="stylesheet" href="http://dreamchain.com/static/split-pane/split-pane.css">
<link rel="stylesheet" href="http://dreamchain.com/static/split-pane/pretty-split-pane.css">
<div class="split-pane-frame">
  <div class="split-pane vertical-percent">
    <div class="split-pane-component" id="left-component">
      <div class="decoration">  
	    <div id="he_preview">&nbsp;</div>
      </div>
    </div>
    <div class="split-pane-divider" id="my-divider">
    </div>
    <div class="split-pane-component" id="right-component">
      <textarea autofocus id="he_htmlInput" style="width:calc(100% - 6px); height:calc(100% - 6px);">A <strong>bold</strong> word. </textarea>
    </div>
  </div>
</div>
</div>

CSS

html, body { height: 100%; min-height: 100%; margin: 0; padding: 0; }
#left-component { right:50%; margin-right:5px; background:yellow;}
#my-divider { right: 50%; width: 5px; }
#right-component { width:50%; background:#fafaf4;}

JavaScript

$(function() {
  // set splitter
  $('div.split-pane').splitPane();
    
  // render the HTML whenever it's changed
  $('#he_htmlInput').on(
    'change, keyup',
    function() {
      var htmlText = $('#he_htmlInput')[0].value;
      var htmlDOM = $.parseHTML( htmlText );
      $('#he_preview').empty().append( htmlDOM );
    }
  );

  
    
});