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

【问题标题】：drop event on textareas / WYSIHTML5 editor在 textareas / WYSIHTML5 编辑器上放置事件
【发布时间】：2012-12-21 09:38:52
【问题描述】：

知道如何在 WYSIHTML5 编辑器中收听/挂钩 drop 事件吗？

我想要的是...我有 wysihtml5，在它下面有用户上传的图像（如附件中所示），当我将其中一个图像拖放到 wysihtml5 时，它会插入它（我想只是浏览器的默认功能，就像当您将任何链接拖动到任何文本区域/文本输入时一样），但与源图像具有相同的 src，这就是缩略图分辨率，我宁愿想要更大的东西。所以我想我会连接一个放置事件并从缩略图的 data-big-src 属性中获取图像源。

我试过了

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

编辑器是 wysihtml5 的实例，也尝试将侦听器添加到原始文本区域，但都没有工作/触发，有什么提示吗？

// 编辑粘贴/粘贴：作曲家

可能是我正在寻找的东西，但它不会返回丢弃的对象....

【问题讨论】：

标签： javascript html wysihtml5

【解决方案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 吗？还是已经有了，我没弄明白。

【讨论】：

【解决方案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/

【讨论】：