Drop Content in Froala WYSIWYG Editor V3

by froala

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.pkgd.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_style.min.css">
<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

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);
            }
  ...