HTML 5拖放到Firefox中的wysiwyg編輯器

我有一個使用HTML 5拖放api的wysiwyg編輯器，允許用戶在他們正在編輯的頁面中放置小部件。當OnDrop事件觸發時，我阻止默認事件，並在表示插入的小部件的編輯器中插入一些html。我在Firefox中使用execCommand("inserthtml", false, html)。HTML 5拖放到Firefox中的wysiwyg編輯器

在IE中可以正常工作，但在Firefox中，html不會放在它被放置的位置。它總是被放置在之前選擇的位置，這導致我相信取消OnDrop事件來覆蓋默認放置也會取消選擇更改。

關於如何解決這個問題的任何想法？

謝謝！

來源

2010-01-27 einarq

嗨你有沒有得到這樣做更多的事了？我今天早上在JS上尋找一個很好的挑戰，而我的大腦正在考慮一些其他任務，所以我想我可能會問，並戳了一下... – jcolebrand 2010-04-29 17:43:38

對不起，回覆遲！我還沒有能夠嘗試任何這些建議，但我懷疑他們會工作，因爲這是使用HTML5拖放API，而不是例如YUI提供的正常拖放的東西。我使用YUI而不是jQuery，所以我不知道jQuery，但很確定YUI拖放不實現任何HTML5的東西。我最終解決了這個問題，方法是允許默認放置，然後用我之後想要的文本替換丟棄的文本。對解決方案不滿意，但適用於我的情況。 – einarq 2010-05-25 08:50:26

我討厭這類答案，但我不得不說，jQuery UI的拖動& drop事件結構非常簡單。它可以讓你跟蹤你正在使用的對象，並快速追加你正在談論的HTML。

如果你不熟悉它，我認爲這是你正在談論的系統類型的一個很好的選擇。

來源

2010-05-15 01:35:01 Trafalmadorian

是的，或YAHOO提供了一個很好的解決方案，例如http://developer.yahoo.com/yui/examples/dragdrop/。

來源

2010-05-17 09:28:17 danjah

試試這個

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

來源

2017-07-07 06:04:14

HTML 5拖放到Firefox中的wysiwyg編輯器

回答

相關問題