Drag drop images into radeditor from radrotator

[anand]

HI,
    I am showing thumbnails of images(stored in ~\images\thumbnails\xyz_thumbnail.jpg) in RadRotator and when anybody drags and drops the thumbnail from the rotator into radeditor, then I need the main image(~\images\xyz.jpg) to be placed into the rad editor and not the thumbnail. Can anybody suggest the event in which I can do this and how?

[Rumen]

Hello Anand,

You could capture the drop event of the content area of RadEditor in order to achieve this.
Below is a simple demo for implementing drag and drop using the OnClientLoad client-side handler from the example in my previous post.

Copy Code

function editorClientLoad(editor, args) {

                editor.get_dialogOpener().add_close(dialogClosed);

                                                 var element = document.all ? editor.get_document().body : editor.get_document();

                $telerik.addExternalHandler(element, "drop", function (e) {

                    setTimeout(function () {

                        var currentElement = editor.getSelectedElement(); //get reference to the selected element

                        if (currentElement.tagName == "IMG")//check if the element is a IMG

                        {

                            currentElement.parentNode.innerHTML = currentElement.outerHTML; // paste the image

                        }

                    }, 0);

 

                });

 

}

// OnClientLoad handler

Note that the above is just an example how to attach a function to the drop event, but not a fully functional solution for your scenario. Keep in mind that there might be other HTML elements dragged into the editor along with the image - you can't control this behavior of the browser.

I hope the provided solution gives answer to your question.

Best wishes,
Rumen
the Telerik team

[anand]

Hello Rumen,

Thanks for the reply. I implemented the below mentioned code and I successfully got the drag/drop event for rad editor.

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
        </telerik:RadEditor>

        <script type="text/javascript">
            function OnClientLoad(editor, args)
            {
                var element = document.all ? editor.get_document().body : editor.get_document();
                var eventHandler = $telerik.isSafari ? "dragend" : "drop";

                $telerik.addExternalHandler(element, eventHandler, function (e)
                {
                    setTimeout(function ()
                    {
                        var currentElement = editor.getSelectedElement(); //get reference to the selected element

                        if (currentElement.tagName == "IMG")//check if the element is a IMG

                        {

                            currentElement.parentNode.innerHTML = currentElement.outerHTML; // paste the image

                        }

                    }, 300);
                });

                //attach handler to the page's document
                if ($telerik.isSafari) {
                    document.addEventListener("dragend", function ()
                    {
                        setTimeout(function ()
                        {
                            alert("OnDragEnd fired for the page document");
                        }, 300);
                    }, false);
                }
            }
        </script>

In above code the problem is with getSelectedElement() which returns wrong element for nested element, I get "BODY" as the nodename. I was expecting "IMG".  So could you please suggest some solution on this.

Also if instead of using thumbnail images if we just resize the origion image's size of the rad rotator, then I think it will also work but only we need to resize the radrotator height and width dynamically. So could you please suggest me a way, how to set the values to its Width and Height properties based on image's count in the rad rotator?

Thanks once again :-)

[Marin Bratanov]

Hello Anand,

I am not sure how exactly you implement this drag and drop functionality, but I would suggest that you examine the following online demo: http://demos.telerik.com/aspnet-ajax/editor/examples/treeviewandeditor/defaultcs.aspx. It shows another way of pasting an image in the RadEditor - by simply creating a new img element, setting is src attribute accordingly and pasting it as html content. This is done in the OnClientNodeDropping function. You can try to implement this approach in your current scenario.

  As for changing the RadRotator's dimensions dynamically - this is only possible in the code-behind, as it requires many calculations and settings to be taken into account. If you wish to do this on the client I would recommend performing an AJAX request to make the change on the server and update the rotator only.:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="OnAjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadRotator1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadRotator runat="server" ID="RadRotator1"......></telerik:RadRotator>

Call this function when you need to change the size:

function changeRotatorSize()
{
    $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("resizeRotator");
}

And in the code behind

protected void OnAjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "resizeRotator")
    {
        //use your custom values, these are only for demonstration
        RadRotator1.Width = Unit.Pixel(300);
        RadRotator1.Height = Unit.Pixel(100);
        RadRotator1.ItemWidth = Unit.Pixel(300);
        RadRotator1.ItemHeight = Unit.Pixel(100);
        //set the desired item as initial, since it will otherwise start from the first
        RadRotator1.InitialItemIndex = 3;
    }
}

You can also have the original items in the RadRotator and simply reduce the Item's size to make them look like thumbnails instead of resizing the rotator. Please note that the RadRotator requires all the items to have the same sizes and for this size to correspond with the Rotator's size.

Kind regards,
Marin
the Telerik team

[anand]

Hello Marin,

Thanks for the reply. We have decided to disable drag/drop event of radeditor control instead of resizing the images of radrotator.

Thanks once again :-)

[Rashim]

Hi , I am new with that technology. I am facing one problem when i am going to work with that editor.

What i need actually is given below:
1. Need to add a Button on Editor Header Which name should be "Insert layer"
2. When We Click this Button a fixed size Div will be added to the Editor Text Area.
3. And We should able to drag/drop the div in any where of the Text area of Editor.

Could you please give any idea and sample code or any link to do functionality as i have explained.

Thanks,
Rashim

[Rumen]

Hello Rashim,

The drag and drop event in the content area is supported by IE and Firefox only and it occurs when style="position: absolute" is applied to the DIV element. For your convenience I implemented a custom toolbar button InsertDiv which inserts a draggable DIV in the content area:

Copy Code

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.reTool .InsertDiv
{
background-image: url(http://demos.telerik.com/aspnet-classic/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="ToolsFile.xml"></telerik:RadEditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["InsertDiv"] = function (commandName, editor, args) {
editor.pasteHtml("<div style=\"position:absolute;width:150px;height:150px;border: 1px solid red;\">sample content</div>");

};
</script>

</form>
</body>
</html>

You can see the following video for more information: http://screencast.com/t/WvoKCP2MtE.


All the best,
Rumen
the Telerik team