API

Live Content Preview

This example allows you to see when the contentChanged event is triggered and how the rich text editor's content appears outside the editable area.

Try it yourself:

Edit in JSFiddle

HTML

Copy

<div id="froala-editor">
  <p>Start typing and you can preview the content of the WYSIWYG HTML editor as you type below the editing box.</p>
</div>
<br/>
<div id="preview" class="fr-view">
  <p>Start typing and you can preview the content of the WYSIWYG HTML editor as you type below the editing box.</p>
</div>

JAVASCRIPT

Copy

<script>
  $(function() {
    new FroalaEditor('div#froala-editor', {
      events: {
        contentChanged: function () {
          $('#preview').html(this.html.get());
        }
      }
    })
  });
</script>