0

ドロップ イベントを WYSIHTML5 エディターにリッスン/フックする方法はありますか?

私が欲しいのは...私はwysihtml5を持っており、その下にユーザーがアップロードした画像(添付ファイルを参照)があり、画像の1つをwysihtml5にドラッグアンドドロップすると、それが挿入されます(これは単なるリンクを任意のテキストエリア/テキスト入力にドラッグするときと同じように、ブラウザーのデフォルトの機能ですが、ソース画像と同じ src を使用し、それがサムネイルの解像度であり、もっと大きなものが必要です。そこで、ドロップ イベントをフックして、たとえばサムネイルの data-big-src 属性から画像ソースを取得しようと考えました。

私は試した

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

エディターは wysihtml5 のインスタンスであり、元のテキストエリアにもリスナーを追加しようとしましたが、どれも機能/起動しませんでした。ヒントはありますか?

ここに画像の説明を入力

// 貼り付けを編集 / paste:composer

おそらく私が探しているものですが、ドロップされたオブジェクトは返されません....

4

2 に答える 2

1

したがって、貼り付けイベントでも何もできなかったので、ハックする必要がありました。つまり、dom.observe(element, pasteEvents, function()) 関数内を変更する必要がありました。具体的には、私がしなければならなかったことは

変化する

if (dataTransfer && browser.supportsDataTransfer())

に

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

どうやらFirefoxはbrowser.supportsDataTransfer（）関数にfalseを返すため

次に、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);
  }

});

挿入される要素が実際に画像であるかどうかをテストし、フル サイズの画像への URL を含む data-src 属性を取得してから、insertImage コマンドを実行します。

これは非常に不格好ですが、wysihtml5 を最新バージョンに更新すると壊れてしまいます。このための何らかの API を用意できますか? それともすでにそこにあり、私はそれを理解していませんでした.

于 2012-12-21T10:54:53.790 に答える
0

これを試して

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

于 2017-07-07T07:02:17.200 に答える