Problem to drag-drop Images in multiple Editor in a page

[Aminul]

Hello Team, 

We have a new feature in application where we will have a page with one RadTreeView and two or three RadEditor.

The RadTreeView will be added to display the list of images and user will drag the image and drop to any editor.

As per the demo the one Treeview and one Editor is working okay. But when I add two or more Editor the dropping is not working in all editor. We can drop the image only the last editor.  I also tried to get the destination item (editor or div ) in OnClientNodeDropping event but I did not get the destination item. If we get it when we can add the image in destination item (editor or div ). 

Dear expert, is there anyway to get the Id of destination item in  OnClientNodeDropping event?

Or 

Any solution of this problem problem.

 

Thanks

 

 

 

 

[Rumen]

Hi Robert,

The solution in the Drag-and-drop Images in RadEditor demo is designed to work with a single editor instance and obtains the RadEditor ID from the OnClientLoad function, which returns an instance of the last editor rendered on the page. That's why the editor.pasteHtml function always pastes the image in the last editor.

I managed to implement a solution based on the cursor position:

1. All editor's should have DIV content area modes set - ContentAreaMode="Div"

<telerik:RadEditor RenderMode="Lightweight"  Width="500" ContentAreaMode="Div"
    Height="200" ID="RadEditor1" runat="server" OnClientLoad="TelerikDemo.RadEditor_OnClientLoad"
    EmptyMessage="<h4>You can drag an image from the tree view into this content area.</h4>">
</telerik:RadEditor>
<telerik:RadEditor RenderMode="Lightweight"  Width="500"
    Height="200" ID="RadEditor2" runat="server" OnClientLoad="TelerikDemo.RadEditor_OnClientLoad" ContentAreaMode="Div"
    EmptyMessage="<h4>You can drag an image from the tree view into this content area.</h4>">
</telerik:RadEditor>
<telerik:RadEditor RenderMode="Lightweight"  Width="500"
    Height="200" ID="RadEditor3" runat="server" OnClientLoad="TelerikDemo.RadEditor_OnClientLoad" ContentAreaMode="Div"
    EmptyMessage="<h4>You can drag an image from the tree view into this content area.</h4>">
</telerik:RadEditor>

2. Here is the code which checks for the cursor position and the modified function:

TelerikDemo.OnClientNodeDropping = function (sender, args) {

    var event = args.get_domEvent();
    var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y);

    switch (elementMouseIsOver.id) {
        case "ctl00_ContentPlaceholder1_RadEditor1_contentDiv": editor = $find("ctl00_ContentPlaceholder1_RadEditor1");
            break;
        case "ctl00_ContentPlaceholder1_RadEditor2_contentDiv": editor = $find("ctl00_ContentPlaceholder1_RadEditor2");
            break;
        case "ctl00_ContentPlaceholder1_RadEditor3_contentDiv": editor = $find("ctl00_ContentPlaceholder1_RadEditor3");
            break;
    }

    var result = isMouseOverEditor(editor, event);
    if (result) {
        var imageSrc = args.get_sourceNode().get_value();
        if (imageSrc && (imageSrc.indexOf(".gif") != -1 || imageSrc.indexOf(".jpg") != -1)) {
            var imageSrc = "<img src='" + imageSrc + "'>";
            editor.setFocus();

            editor.pasteHtml(imageSrc);
        }
    }
    //setOverlayVisible(false);
};

This is just an example of how this functionality can be achieve. The code can be further refactored and improved.

For your convenience I have attached the modified demo files.

Kind regards,
Author nickname
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.