Editor changing my <img> tag src attribute

4 posts, 0 answers
  1. Vince
    Vince avatar
    1 posts
    Member since:
    Dec 2011

    Posted 12 Dec 2011 Link to this post

    When I populate the RadEditor prior to the page loading, it is automatically inserting the current page Url in the src tag.

    For example, if I populate the .Html propery of the editor with the following code.

    <html>
    <body>
      <img src="##CustomURL##">
    <body>
    <html>

    ##CustomURL## is a token that our code behind replaces when it renders elsewhere.

    The editor then turns this code in to:

    <html>
    <body>
      <img src="http://localhost/myapp/editor.aspx##CustomURL##">
    <body>
    <html>

    How can I stop this?
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 12 Dec 2011 Link to this post

    Hi Vince,

    You can observe this behavior if you have enabled RadEditor's MakeUrlsAbsolute built-in content filter. Could you please verify if this is the case?

    If you do need this filter enabled but want to have image with relative path you can use the approach from the following KB article to modify this behavior:
    How to produce relative path for links when MakeUrlsAbsolute content filter enabled

    Kind regards,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Caleb
    Caleb avatar
    2 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2012 Link to this post

    I'm having this issue also, but from dragging an image to a different place in the editor. I have ContentFilters="None", and dragging the image doesn't seem to subscribe to the OnClientPasteHtml event.
  4. Rumen
    Admin
    Rumen avatar
    14324 posts

    Posted 27 Aug 2012 Link to this post

    Hi,

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

    Another approach is to modify the paths on the client when the drop | dragend events are fired:
    <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>


    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top