HTML 5 drag-drop image into wysiwyg editor

HTML 5 drag-drop into wysiwyg editor

by suraj mahajan

HTML

<link rel="stylesheet" href="https://jhollingworth.github.io/bootstrap-wysihtml5/lib/css/bootstrap.min.css">
<link rel="stylesheet" href="https://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css">
<script src="https://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
<script src="https://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/jquery-1.7.2.min.js"></script>
<script src="https://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
<script src="https://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="https://html5demos.com/js/h5utils.js"></script>


<textarea class="textarea" placeholder="Drag and Drop image , Or paste image here" style="width: 810px; height: 200px"></textarea>

JavaScript

$('.textarea').wysihtml5({
    events: {
        "load": function() {
      	var vm=this;
        
        $($('.wysihtml5-sandbox').contents().find('body')).on("paste", function(event) {
        var orgEvent = event.originalEvent;
             for (var i = 0; i < orgEvent.clipboardData.items.length; i++) 
             {
      if (orgEvent.clipboardData.items[i].kind == "file" && orgEvent.clipboardData.items[i].type == "image/png") {
      	
				var imageFile = orgEvent.clipboardData.items[i].getAsFile();
				var fileReader = new FileReader();
        
				fileReader.onloadend = function () {
            var data = this.result;
            debugger;
                 try
                 {
										setTimeout(function() {	vm.composer.commands.exec('insertImage', { src: data, alt: "this is an image" } );      
                        }, 0);
                   i=orgEvent.clipboardData.items.length;
                 }
                 catch(err)
                 {
                 	alert('put cursor in textareaa');
                 }
  			}
        
				fileReader.readAsDataURL(imageFile);
				break;
      }
    }
          });
        
        
           $($('.wysihtml5-sandbox').contents().find('body')).on("dragleave", function(event) {
              event.preventDefault();  
              event.stopPropagation();
          });

          $($('.wysihtml5-sandbox').contents().find('body')).on("drop", function(event) {
              event.preventDefault();  
              event.stopPropagation();
               var dt = event.originalEvent.dataTransfer;
  						var files = dt.files;
              
              var reader = new FileReader();
              reader.onload = function (e) {
                  var data = this.result;
                 try
                 {
                 debugger;
                 // vm.composer.commands.exec('insertImage',
                 // { src: e.target.result, alt: "this is an image" });
                 }
                ...