HTML 5 drag-drop into wysiwyg editor in Firefox

I have a wysiwyg editor using the HTML 5 drag-drop api to allow the user to place widgets within the page they are editing. When the OnDrop开发者_开发技巧 event fires, I prevent the default event, and insert some html within the editor that represents the widget they inserted. I use execCommand("inserthtml", false, html) for this in Firefox.

This works fine in IE, but in Firefox the html is not placed in the location where it was dropped. It always gets placed in the location where the previous selection was, which leads me to believe that cancelling the OnDrop event to override the default drop also cancels the selection change.

Any ideas on how to solve this?

Thanks!

I hate these kinds of answers, but I have to say, jQuery UI's drag & drop event structure is pretty straightforward. It would allow you to track the objects you're using and append the html you're talking about quickly.

If you aren't familiar with it, I think it's an excellent option for the type of system you're talking about.

Yep, or YAHOO offers a nice solution, with examples at http://developer.yahoo.com/yui/examples/dragdrop/.

Try this

$('.textarea').wysihtml5({
    events: {
        "load": function() {
        var vm=this;
           $($('.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();
              debugger;
               var dt = event.originalEvent.dataTransfer;
                        var files = dt.files;

              var reader = new FileReader();
              reader.onload = function (e) {
                  var data = this.result;
                  debugger;
                  vm.composer.commands.exec('insertImage',e.target.result);
              }
              reader.readAsDataURL( files[0] );
          });
                $($('.wysihtml5-sandbox').contents().find('body')).on("dragover", function(event) {
      console.log('graddddd');
                  event.preventDefault();  
                  event.stopPropagation();
                  $(this).addClass('dragging');
              });
        }
    }
});

https://jsfiddle.net/surajmahajan007/2yu456nw/