Live Code Preview

Try it yourself:

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>Preview the HTML code of the WYSIWYG HTML editor as you type in the box below.</p>
</div>
<br/>
<pre id="eg-previewer" class="prettyprint linenums:1">
</pre>

JAVASCRIPT

<script>
  var callback = function () {
    var editor = this

    $('pre#eg-previewer').text(editor.codeBeautifier.run(editor.html.get()))
    $('pre#eg-previewer').removeClass('prettyprinted');
  }

  new FroalaEditor('div#froala-editor', {
    events: {
      initialized: callback,
      contentChanged: callback
    }
  })
</script>