[Solved] Image path problem

[Anders]

Hello!

I've stumbled across a problem with images being moved around, by selecting and dragging them in the editor in Firefox. Whenever I do this, the image url gets changed – two dots are being added in front of the file path. So, instead of having the url read like this: src="/image-file.jpg" (which is what we're intending) it becomes src="../image-file.jpg" which in turn makes the image disappear once the page is saved & published through our cms tool.

Any solution to this?

[Rumen]

Hello Anders,

The observed behavior is due to the Rich Text Editing engine of Firefox that RadEditor uses. To fix it and strip the .. symbols at the beginning of the path that the browser add you can use the following code:

<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]);

             //debugger;

            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>

Sincerely yours,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.