HTML 5 drag-drop into wysiwyg editor in Firefox

6
votes

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!

3
javascripteditordrag-and-drophtml
Hi did you ever get any more work done on this? I'm looking for a good challenge on JS this morning while my brain is mulling some other tasks, so I thought I might ask and poke about a bit... – jcolebrand
Sorry for the late reply! I haven't been able to try any of these suggestions, but I doubt they will work since this is using the HTML5 drag-drop api, not the normal drag-drop stuff that for instance YUI offers. I use YUI and not jQuery, so I don't know about jQuery, but pretty sure YUI drag-drop does not implement any HTML5 stuff. I eventually solved the problem by allowing the default drop, and replacing the dropped text with the text I wanted afterwards. Not happy with the solution, but it works for my case. – einarq

3 Answers

1
votes

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.

0
votes

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

0
votes

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/