Days
Hours
Minutes
Seconds
x

New Advanced File Management – Learn More

Skip to content

API

Live Code Preview

live-code-preview

Try it yourself:

Preview the HTML code of the WYSIWYG HTML editor as you type in the box below.




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>
  $(function() {
    $('div#froala-editor')
      .on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
        $('pre#eg-previewer').text(editor.codeBeautifier.run(editor.html.get()))
        $('pre#eg-previewer').removeClass('prettyprinted');
        prettyPrint()
      })
      .froalaEditor()
  });
</script>