JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="treeview"></div>

<textarea id="editor" rows="5" cols="10" style="width:100%;height:400px"></textarea>

JavaScript

$("#treeview").kendoTreeView({
    template: kendo.template("<div id='draggablenode'>#=item.text#</div>"),
    dragAndDrop: true,
    dataSource: [
        {
        text: "Parent Node",
        expanded: true,
        items: [
            {
            text: "Node 1"},
        {
            text: "Node 2"},
        {
            text: "Node 3"}
        ]},
        ],
});


//Below code not working
//$("#editor").kendoEditor().kendoDropTarget({
//    drop: onDrop
//});

//Tried this one too
//$("#editor").kendoEditor();
//$("#editor").kendoDropTarget({
//    drop: onDrop
//});

//This works with textarea
$("#editor").kendoDropTarget({
    drop: onDrop
});


function onDrop(e) {
    $('#editor').append(" Do here... ");
}