Destroy / Init Froala Editor V3

by Jithin Raj P R

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>The buttons below will destroy and init the rich text editor again.</p>
</div>
<p>
  <a id="btn-destroy" href="#">Destroy</a>
  <a id="btn-init" href="#">Init</a>
</p>

JavaScript

var editor = new FroalaEditor('div#froala-editor')

// Destroy action.
$('a#btn-destroy').on('click', function (e) {
  e.preventDefault();

  if (editor) {
  	editor.html.set('<p>My custom paragraph.</p>');
    editor.destroy();
    editor=null;
  }
});

// Initialize action.
$('a#btn-init').on('click', function (e) {
  e.preventDefault();

  if (!editor) {
    editor = new FroalaEditor('div#froala-editor')
  }
})