JSFiddle - React, Tailwind, and code Playground

by ruchan

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<div><textarea id="textpad1"></textarea></div>
<div><textarea id="textpad2"></textarea></div>
<div><textarea id="textpad3"></textarea></div>
<div><textarea id="textpad4"></textarea></div>

JavaScript

for(var i =1; i<=4; i++)
{
    var editoritem="#textpad"+i;
    $(editoritem).kendoEditor();
   
    //RPS: Paste Image In Editor
    var editor = $(editoritem).data("kendoEditor");
    $(editor.document).on("paste", function (e) {
        var clipboard = e.originalEvent.clipboardData;
        
        if (clipboard && clipboard.items) {
            var screenshot = clipboard.items[0];
            
            if (screenshot.kind == "file") {
                var blob = screenshot.getAsFile();
                
                var reader = new FileReader();
                
                reader.onload = function (event) {
                    var html = kendo.format('<img src="{0}"/>', event.target.result);
                    
                    editor.paste(html);
                };
                reader.readAsDataURL(blob);
            }
        }
    });
}