在textareas上放置事件/ WYSIHTML5编辑器

Question

任何想法如何监听/挂钩到WYSIHTML5编辑器的下降事件？

我想要的是...我有wysihtml5，并在其下由用户上传的图像（如附件所示），当我将其中一个图像拖放到wysihtml5时，它将插入它（我想这只是一个浏览器的默认功能，就像您将任何链接拖到任何textarea / text输入时一样），但是src与源图像相同，这是缩略图分辨率，我希望有更大的显示空间。 因此，我想我应该挂起一个drop事件并从缩略图的data-big-src属性获取图像源。

我试过了

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

编辑器是wysihtml5的实例，它也尝试将侦听器也添加到原始textarea中，但没有一个有效/无效，有任何提示吗？

//编辑粘贴/ paste：composer

可能是我要寻找的东西，但是它不返回被丢弃的对象。

Answer 1

因此，即使使用粘贴事件，我也无能为力，所以我不得不改变自己的方式，这意味着在dom.observe（element，pasteEvents，function（））函数内部进行更改，具体来说，我要做的是

更改

if (dataTransfer && browser.supportsDataTransfer())

至

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

因为很明显，Firefox将false返回给browser.supportsDataTransfer（）函数

然后在if（data）内部更改为

  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);
  }

});

在其中测试要插入的元素是否实际上是图像，然后获取其data-src属性，该属性包含指向我的完整尺寸图像的url，然后执行insertImage命令。

不过这很笨拙，当我将wysihtml5更新到最新版本等时，它会中断，我们可以为此使用某种api吗？ 还是已经存在，但我没有弄清楚。

Answer 2

尝试这个

$($('.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/