External Button for Froala Editor V3

by Froala_marketing

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>This example illustrates how to clear the text using a button external to the Froala WYSIWYG HTML Editor interface.</p>
</div>
<p><button id="get-text">Clear</button></p>

CSS

#get-text{
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
        border-color: #0098f7;
    background: #0098f7;
        color: #ffffff;
  
}

JavaScript

new FroalaEditor('div#froala-editor', {
  events: {
    initialized: function () {
      var editor = this;
      document.getElementById("get-text").addEventListener("click", function () {
        editor.html.set('');
        editor.events.focus();
      })
    }
  }
});