javascript - Froala 编辑器/拖放

Question

我正在尝试使用 Froala 编辑器实现一些自定义放置事件功能。他们在 codepen 上有一个非常基本的例子:Drag Drop Example

问题是这不起作用 - 我无法触发自定义“froalaEditor.drop”函数，我确信我需要在某处为 HTML5 放置事件添加某种“防止默认”但我所做的一切已经尝试过要么终止所有掉落功能，要么什么都不做。自定义函数如下所示:

$('div#froala-editor').froalaEditor({
  toolbarButtons: ['bold', 'italic', 'underline', 'insertImage', 'insertLink', 'emoticons', 'undo', 'redo'],
  pluginsEnabled: ['image', 'link', 'draggable', 'emoticons']
})
.on ('froalaEditor.drop', function (e, editor, dropEvent) {
//// do stuff - nothing is firing

我正在通过标准使其可拖动:

draggable="true"

如有任何帮助或指点，我们将不胜感激!

谢谢，

标记

更新:::

这是我的 JS:

$(function() {
// For Firefox to work.
$("#drag-smile, #drag-text").on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("Text", this.id);
});

$("div#froala-editor")
    .froalaEditor({
        toolbarButtons: [
            "bold",
            "italic",
            "underline",
            "insertImage",
            "insertLink",
            "emoticons",
            "undo",
            "redo"
        ],
        pluginsEnabled: ["image", "link", "draggable", "emoticons"]
    })
    .on("froalaEditor.drop", function(e, editor, dropEvent) {
        // Focus at the current posisiton.
        editor.markers.insertAtPoint(dropEvent.originalEvent);
        var $marker = editor.$el.find(".fr-marker");
        $marker.replaceWith($.FroalaEditor.MARKERS);
        editor.selection.restore();

        // Save into undo stack the current position.
        if (!editor.undo.canDo()) editor.undo.saveStep();

        // Insert HTML.
        if (dropEvent.originalEvent.dataTransfer.getData("Text") == "drag-smile") {
            editor.html.insert(
                '<span class="fr-emoticon fr-emoticon-img" style="background: url(https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f600.svg)">&nbsp;</span>'
            );
        } else {
            editor.html.insert("Hello!");
        }

        // Save into undo stack the changes.
        editor.undo.saveStep();

        // Stop event propagation.
        dropEvent.preventDefault();
        dropEvent.stopPropagation();
        return false;
    });
   });

还有我的 HTML:

   <div id="drag-smile" style="border: solid 1px #CCC; padding: 5px; width: 300px;" draggable="true"><img src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f600.svg" width="32" /> Drag Me to insert a smile.</div><br/>
<div id="drag-text" style="border: solid 1px #CCC; padding: 5px; width: 300px;" draggable="true">Drag Me to insert some text.</div><br/>
<div id="froala-editor">
<h3>Click here to edit the content</h3>
<p>The image can be dragged only between blocks and not inside them.
</p>
</div>

基本上，当您将其中一个可拖动的 div 拖到编辑器中时，应该将自定义 html 注入(inject)到编辑器中，但它只是将 div id 添加为文本。

Answer 1

那是因为 drop 事件在到达您的回调之前被停止了。像这样更改它以确保始终首先调用您的事件:

$("div#froala-editor")
.on("froalaEditor.initialized", function(e, editor, dropEvent) {

    editor.events.on('drop', function (dropEvent) {
        // Focus at the current posisiton.
        editor.markers.insertAtPoint(dropEvent.originalEvent);
        var $marker = editor.$el.find(".fr-marker");
        $marker.replaceWith($.FroalaEditor.MARKERS);
        editor.selection.restore();

        // Save into undo stack the current position.
        if (!editor.undo.canDo()) editor.undo.saveStep();

        // Insert HTML.
        if (dropEvent.originalEvent.dataTransfer.getData("Text") == "drag-smile") {
            editor.html.insert(
                '<span class="fr-emoticon fr-emoticon-img" style="background: url(https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.1/assets/svg/1f600.svg)">&nbsp;</span>'
            );
        } else {
            editor.html.insert("Hello!");
        }

        // Save into undo stack the changes.
        editor.undo.saveStep();

        // Stop event propagation.
        dropEvent.preventDefault();
        dropEvent.stopPropagation();
        return false;
    }, true);
});
.froalaEditor({
    toolbarButtons: [
        "bold",
        "italic",
        "underline",
        "insertImage",
        "insertLink",
        "emoticons",
        "undo",
        "redo"
    ],
    pluginsEnabled: ["image", "link", "draggable", "emoticons"]
})

});