drag and drop images to editor in html mode

[Aye Myint]

Hi,

I'm wondering if I can drag and drop images from treeview to html view of editor.
But unlike design view, I want to insert the html of the image like <img alt="xxxx" src="xxxx" /> when I drag and drop it to editor's html view.
I tried it in this demo example http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx, but nothing happened when I dragged the image to html view.

Thank you in advance.
Aye

[Rumen]

Hi Aye,

The Drag and Drop Images demo is designed to work only in Design mode of RadEditor. Here is the code that checks whether the mouse is placed over the IFRAME of RadEditor in Design mode:

Copy Code

//Check if the image is over the editor or not
function isMouseOverEditor(editor, events)
{
    var editorFrame = editor.get_contentAreaElement();
    var editorRect = $telerik.getBounds(editorFrame);

    var mouseX = events.clientX;
    var mouseY = events.clientY;

    if (mouseX < (editorRect.x + editorRect.width) &&
     mouseX > editorRect.x &&
        mouseY < (editorRect.y + editorRect.height) &&
     mouseY > editorRect.y)
    {
        return true;
    }
    return false;
}

Since we do not support the requested feature to drag and drop images in HTML mode, you could try to implement it yourself. The HTML mode of RadEditor is a TEXTAREA placed in another IFRAME element. You can get reference to this TEXTAREA control using the editor.get_textArea() method and implement your own code that will insert the treeview node content in it.


Best wishes,
Rumen
the Telerik team