Question

我有一个使用HTML 5拖放API的wysiwyg编辑器，允许用户在他们正在编辑的页面中放置小部件。触发OnDrop事件时，我会阻止默认事件，并在编辑器中插入一些代表它们插入的窗口小部件的html。我在Firefox中使用execCommand("inserthtml", false, html)。

这在IE中运行良好，但在Firefox中，html不会放在它被删除的位置。它总是被放置在前一个选择的位置，这使我相信取消OnDrop事件以覆盖默认下降也会取消选择更改。

关于如何解决这个问题的任何想法？

谢谢！

Answer 1

我讨厌这些答案，但我不得不说，jQuery UI的拖累和放大drop事件结构非常简单。它可以让你跟踪你正在使用的对象并快速附加你正在谈论的html。

如果您不熟悉它，我认为这是您所谈论的系统类型的绝佳选择。

Answer 2

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

Answer 3

试试这个

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

HTML 5拖放到Firefox中的wysiwyg编辑器中

3 个答案: