Basic Froala Editor jsFiddle

by yelton

HTML

<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_editor.pkgd.min.css">
<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_style.min.css">
<div id="froala-editor">
  
</div>

JavaScript

$('#froala-editor').froalaEditor({
})
 .on('froalaEditor.image.beforeUpload', function (e, editor, files) {

//   $('#froala-editor').froalaEditor('destroy');
//   $('#froala-editor').froalaEditor();


   if (files.length) {
     // Create a File Reader.
     var reader = new FileReader();

     // Set the reader to insert images when they are loaded.
     reader.onload = function (e) {
       var result = e.target.result;
       var xxx = editor.image.insert(result, null, null, editor.image.get());
       console.log('xxx', xxx);
     };

     // Read image as base64.
     reader.readAsDataURL(files[0]);
   }

   editor.popups.hideAll();

   // Stop default upload chain.
   return false;
 });