Live Code Preview Froala Editor

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">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_editor.pkgd.min.css">
<script src="https://editor-latest.s3.amazonaws.com/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/css/froala_style.min.css">
<div id="froala-editor">
  If you are sending attachments via an email message and they
    are not getting added as attachments in the Ticket, here are
    some possible causes for why the attachments were not added to
    the ticket:
    <ol>
      <li><strong>The total size of all attachments cannot exceed
      approximately 10MBs in size.&nbsp;</strong><br>
      <br>
      If the total size of all the attachments in an email message
      exceeds this limit, then the email message will not be
      processed and the attachments will not be added to the
      ticket. When an email fails to convert due to size
      restrictions, it will generate a bounce notification event-
      which can send an email notification to the customer or
      specific users in your organization to alert them of the
      failure.<br>
      <br>
      </li>

      <li>
        <strong>The email was sent using Outlook and attachments
        were sent in the proprietary and unsupported winmail.dat
        format.&nbsp;</strong><br>
        <br>
        Outlook is often configured to use a proprietary format
        sending rich text messages, which embeds all the formatted
        text and attachments into a proprietary binary file named
        &quot;winmail.dat&quot;. &nbsp;This...

JavaScript

function updatePreview(editor){
   $('pre#eg-previewer').text(editor.codeBeautifier.run(editor.html.get()))
}

$('div#froala-editor')
  .on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
  	updatePreview(editor);
  })
  .froalaEditor({htmlUntouched: true})