JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<script src="https://cdn.ckeditor.com/ckeditor5/27.0.0/classic/ckeditor.js"></script>
<div id="commet" draggable="true">Drag me!</div>

<div contenteditable="true">
    <p>foo</p>
</div>

JavaScript

document.getElementById('commet').addEventListener('dragstart', function drag($evt) {
  var evt = {
    data: {
      $: $evt
    }
  }; // Create CKEditor event.

  // Create data transfer facade so we can set custom data types (like 'commet').
  CKEDITOR.plugins.clipboard.initDragDataTransfer(evt);
  evt.data.dataTransfer.setData('commet', true);

  // Some text need to be set, otherwise drop event will not be fired.
  evt.data.dataTransfer.setData('text', 'x');
});

CKEDITOR.instances.editor1.on('drop', function(evt) {
  var dataTransfer = evt.data.dataTransfer;

  // Check if element is marked and set the data.
  if (dataTransfer.getData('commet')) {
    dataTransfer.setData('text/html', '<img src="http://ckeditor.com/tmp/4.5.0-beta/img/comet-67p.jpg" alt="Comet 67P" width="113" height="90" />'); //set data
  }
});