Drag & Drop

Drop Content

Try it yourself:

Edit in JSFiddle

HTML

Copy

<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>Drag the image above or the text block to insert them in the editor.</p>
</div>

JAVASCRIPT

Copy

<script>
    var dragCallback = function (e) {
      e.dataTransfer.setData('Text', this.id);
    };

    // For Firefox to work.
    document.querySelector('#drag-smile').addEventListener('dragstart', dragCallback);
    document.querySelector('#drag-text').addEventListener('dragstart', dragCallback);

    new FroalaEditor('div#froala-editor', {
      events: {
        initialized: function () {
          var editor = this;

          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();

            // Firefox show cursor.
            if (editor.core.hasFocus() && editor.browser.mozilla) {
              editor.events.disableBlur();
              setTimeout(function () {
                editor.$el.blur().focus();
                editor.events.enableBlur();
              }, 0);
            }

            return false;
          }, true);
        }
      }
    })
</script>