drag and drop image changing src attribute

[Trevor]

One of our customers has reported a problem with the editor that is also reproducible on the Telerik demo page:

http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx

If you switch to HTML view on the demo page, you'll see this markup for the "RadEditor" logo image:

<img style="margin-top: 25px; float: left; margin-right: 15px;" alt="product logo" src="../../Img/editor.jpg" />

Now switch back to Design view and drag & drop the image to another spot in the editor.

Switch back to HTML view and you'll see the src attribute on the img tag has been changed:

<img style="margin-top: 25px; float: left; margin-right: 15px;" alt="product logo" src="http://demos.telerik.com/aspnet-ajax/editor/Img/editor.jpg" />

Can you provide a fix or other solution to this problem? 

Thanks,
Trevor.

[Rumen]

Hello,

Please, see the following forum thread on the subject: Q2 2010 Copy and paste a relative url is turning absolute.

You can modify the paths on the client when the drop | dragend events occur as shown below:

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

  $telerik.addExternalHandler(element, eventHandler, function(e)
  {
   setTimeout(function()
   {
    var domainName = "http://" + window.location.host;
    var filter = new Telerik.Web.UI.Editor.StripPathsFilter([domainName]);
    var div = editor.get_document().createElement("DIV");
    div.innerHTML = editor.get_html(true);
    var newElement = filter.getHtmlContent(div);
    editor.set_html(div.innerHTML);
   }, 300);
  });
}
</script>
<telerik:radeditor runat="server"
  OnClientLoad="OnClientLoad"
  ID="RadEditor1">
   <Content><img src="/mdc-logo.png" />test test test</Content>
</telerik:radeditor>

Kind regards,
Rumen
the Telerik team

[Trevor]

Hi Rumen,

This won't work for two reasons.

First, the link being dragged/dropped may already have an absolute URL, in which case we wouldn't want it to change to relative after dropping. (Essentially your code creates the same problem that I reported, but in reverse.)

Second, this code changes all the links in the editor body on drop, not just the one element being dropped.

What we need is for the editor to simply *not modify* the url of the element being dragged/dropped.

Can you provide a fix or workaround that addresses these issues?

Thanks,
Trevor.

[Rumen]

Hi,

The only properly working solution is to disable the drag and drop, because in other case the browser's rich text editing engine will modify the link/image path when it is dragged in the content area of the editable iframe/div. You can reproduce the same behavior in an editable iframe or div.

The code below disables the drag and drop in the content area:

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

        $telerik.addExternalHandler(element, eventHandler, function (e) {
            $telerik.cancelRawEvent(e);
        });
    }
</script>
<telerik:radeditor runat="server"
  OnClientLoad="OnClientLoad"
  ID="RadEditor1">
   <Content><img src="Images/gepard1.jpg" />test test test</Content>
</telerik:radeditor>

Regards,
Rumen
the Telerik team

[Trevor]

Hi Rumen,

thanks for the info,

Is there any possible way to identify the dropped element in the drop event? If so, we ought to be able to modify the src attribute for just that one element.

[Rumen]

Hello,

This is the exact problem. The browser's event does not offer information about the dragged image. If you would like you can experiment with an editable div (<div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;">sample <img src="test.jpg" /> content</div>). If you succeed and implement a solution, you will be able to integrate it in RadEditor too.

Regards,
Rumen
the Telerik team