Live Code Preview Froala Editor V3

by Hari Menon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<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">
</pre>

JavaScript

var callback = function () {
 var editor = this

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

 const editor = new FroalaEditor('div#froala-editor', {
   events: {
     initialized: callback,
     contentChanged: callback
   }
 })