Drag and Drop Images to Editor

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

    Posted 08 May 2014 Link to this post

    Requirements

    Telerik Product and Version

    Kendo UI 2014.1.416

    Supported Browsers and Platforms

    All

    Components/Widgets used (JS frameworks, etc.)

    Kendo UI TreeView, Kendo UI Editor

    PROJECT DESCRIPTION 
    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>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Kendo UI Editor - Image Drag and Drop</title>
     
       
      <style>
         
        html
        {
          font: 12px sans-serif;
        }
         
        html,
        body
        {
          height: 100%;
          padding: 0;
          margin: 0;
        }
         
        #treeview,
        #editorWrapper
        {
          float: left;
        }
         
        #treeview
        {
          width: 200px;
        }
         
        #editorWrapper
        {
          width: 600px;
          position: relative;
        }
         
        #editorWrapper .k-loading-image
        {
          display: none;
        }
         
      </style>
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
      <div>
       
        <div id="treeview"></div>
       
        <div id="editorWrapper">
          <textarea id="editor" cols="30" rows="10"></textarea>
        </div>
       
      </div>
      <script>
         
        $(function(){
           
          var body = $(document.body);
           
          var editorWrapper = $("#editorWrapper");
           
          function onDragStart(e) {
            if (!e.sender.dataItem(e.sourceNode).value) {
              e.preventDefault();
            } else {
              kendo.ui.progress(editorWrapper, true);
            }
          }
           
          function onDrag(e) {
            if ($(e.dropTarget).closest(editorWrapper)[0]) {
              e.setStatusClass("k-add");
            } else {
              e.setStatusClass("k-denied");
            }
          }
           
          function onDrop(e) {
            if ($(e.dropTarget).closest(editorWrapper)[0]) {
              e.preventDefault();
              var img = '<img src="' + e.sender.dataItem(e.sourceNode).value + '" alt="image" />';
              $("#editor").data("kendoEditor").exec("inserthtml", {value: img});
            }
            kendo.ui.progress(editorWrapper, false);
          }
           
          $("#treeview").kendoTreeView({
            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
          });
           
            $("#editor").kendoEditor({
            tools: [
              "insertImage"
            ]
          });     
           
        });
         
      </script>
    </body>
    </html>

Back to Top