drop event on textareas / WYSIHTML5 editor

Question

Any idea how to listen to/hook drop event to the WYSIHTML5 editor?

The thing I want is... I have wysihtml5 and under it images uploaded by the user(as seen in the attachment), when I drag and drop one of the imags to the wysihtml5, it inserts it(which I suppose is just a default feature of the browser, just as when you drag any link to any textarea/text input), but with the same src as the source image was, and that's the thumbnail resolution, and I'd rather want something bigger. So I thought I'd hook up a drop event and get the image source from, say, data-big-src attribute of the thumbnail.

I tried

editor.on("drop", function() {
  console.log("fsdf"); 
});

where editor was instance of wysihtml5, tried to add listener to the original textarea as well, none of it worked/fired, any tips?

enter image description here

// edit paste / paste:composer

is probably what I'm looking for, but it doesn't return the dropped object....

score 1 · Accepted Answer · answered Dec 21 '12 at 10:54

So even with paste event, I wasn't able to do anything, so I had to hack my way around, which meant changing inside of dom.observe(element, pasteEvents, function()) function, specificaly what I had to do was

change

if (dataTransfer && browser.supportsDataTransfer())

to

if (dataTransfer && browser.supportsDataTransfer() || dataTransfer && $(dataTransfer.getData("text/html")).is("img"))

because apparently firefox return false to browser.supportsDataTransfer() function

then change inside of if(data) to

  if (data) {
    if ($(data).is("img")) {
        event.preventDefault();
        var _myImgElement = $(data);

        that.commands.exec("insertImage", _myImgElement.data("src"));
    } else {



        element.focus();
        that.commands.exec("insertHTML", data);
        that.parent.fire("paste").fire("paste:composer");
        event.stopPropagation();
        event.preventDefault();
    }
  } else {
    setTimeout(function() {
      that.parent.fire("paste").fire("paste:composer");
    }, 0);
  }

});

in which I test if the element being inserted is actually image, then get its data-src attribute, which contains url to my full size image and then exec the insertImage command..

It's very clunky though, it will break when I update wysihtml5 to latest version etc, can we have some sort of api for this? Or is there already and I didn't figure it out.

score 0 · Answer 2 · answered Jul 07 '17 at 07:02

Try this

$($('.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) {
                    debugger;
                  var data = this.result;
                  vm.composer.commands.exec('insertImage',e.target.result);
              }
              reader.readAsDataURL( files[0] );
          });

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

drop event on textareas / WYSIHTML5 editor

2 Answers2