Question

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

麻烦的是，这不起作用 - 我无法获得自定义＆＃39; froalaEditor.drop＆＃39;发射功能，我相信我需要添加一些“防止默认”的功能。 HTML5 drop事件的某处，但我尝试的所有内容都会杀死所有丢弃功能或什么都不做。自定义函数如下所示：

$('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"

非常感谢任何帮助或指示！

谢谢，

标记

UPDATE :::

这是我的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注入编辑器，而只是将divs 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"]
})

}）;

Froala编辑/拖放

1 个答案: