Drag and Drop Images to Editor

Thread is closed for posting
1 posts, 0 answers
  1. Kendo UI
    Kendo UI avatar
    331 posts
    Member since:
    Aug 2011

    Posted 08 May 2014 Link to this post


    Telerik Product and Version

    Kendo UI 2014.1.416

    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)

    Kendo UI TreeView, Kendo UI Editor

    The example below demonstrates how to drag and drop images to the Kendo UI Editor. The demo uses a TreeView as an image source, however, this is not required. Any custom HTML markup can be used in combination with the Kendo UI Drag and Drop framework.

    <!DOCTYPE html>
      <meta charset="utf-8" />
      <title>Kendo UI Editor - Image Drag and Drop</title>
          font: 12px sans-serif;
          height: 100%;
          padding: 0;
          margin: 0;
          float: left;
          width: 200px;
          width: 600px;
          position: relative;
        #editorWrapper .k-loading-image
          display: none;
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <div id="treeview"></div>
        <div id="editorWrapper">
          <textarea id="editor" cols="30" rows="10"></textarea>
          var body = $(document.body);
          var editorWrapper = $("#editorWrapper");
          function onDragStart(e) {
            if (!e.sender.dataItem(e.sourceNode).value) {
            } else {
              kendo.ui.progress(editorWrapper, true);
          function onDrag(e) {
            if ($(e.dropTarget).closest(editorWrapper)[0]) {
            } else {
          function onDrop(e) {
            if ($(e.dropTarget).closest(editorWrapper)[0]) {
              var img = '<img src="' + e.sender.dataItem(e.sourceNode).value + '" alt="image" />';
              $("#editor").data("kendoEditor").exec("inserthtml", {value: img});
            kendo.ui.progress(editorWrapper, false);
            dataSource: {
              data: [
                {text: "Images", value: null, expanded: true, items: [
                  {text: "Telerik logo", value: "http://www.telerik.com/sfimages/default-source/logos/telerik-logo-reversed.png", spriteCssClass: "k-icon k-i-plus"},
                  {text: "Kendo UI Dojo logo", value: "http://trykendoui.telerik.com/images/logo.png", spriteCssClass: "k-icon k-i-plus"}
            dataTextField: "text",
            dataValueField: "value",
            dragAndDrop: true,
            dragstart: onDragStart,
            drag: onDrag,
            drop: onDrop
            tools: [

Back to Top