Copy and Paste from Design mode manipulates anchor tags

2 posts, 0 answers
  1. David Hecker
    David Hecker avatar
    2 posts
    Member since:
    Jul 2012

    Posted 15 Feb 2011 Link to this post

    Given a RadEditor with the following HTML currently loaded:
    <h1><a name="back-to-top"></a>Our Partners</h1>
    <p>aspicer anchor link <a href="#aspicer">test</a></p>
    <p>aspicer actual anchor <a name="aspicer">here</a></p>


    If I copy from DESIGN MODE and paste into any html friendly app (word, visual studio, etc), then what I get out is the following:
    <h1><a name="back-to-top"></a></h1>
    <div>
    <h1>Our Partners</h1>
    <p>aspicer anchor link <a href="http://rd.myapp.com/EditorWindow.aspx?did=c178ea59-4252-4dc5-90c1-5c44f283c2bf&;dt=1&m=1&rwndrnd=0.4956730466801673#aspicer">test</a></p>
    <p>aspicer actual anchor <a name="aspicer">here</a></p>
    </div>
    <p><a name="aspicer"></a></p>


    Notice the link for the named anchor changed to be the URL of the current window that is open. 
    This also occurs if I COPY and PASTE from the RadEditor to the same RadEditor. 
    The editor should not be manipulating the content when I copy and paste from Design mode.

    Using Chrome I get the full URL for the EditorWindow instead of just the anchor tag link.
    Using Firefox it doesn't set the full URL, instead it just sets the path after the domain.  

    NOTE: Copy and Paste within HTML mode works fine and it does NOT manipulate the links.

    I would expect that if I have a link to an anchor such as "#myAnchor" then it will not be changed when coping that content and pasting it elsewhere.
    Likewise if I have a link to an anchor on another page such as "http://cool.com/article.aspx#trees" then I would expect that to also not be manipulated.

    This sounds like it may be a bug in the editor. Does anyone have any advice?
  2. Rumen
    Admin
    Rumen avatar
    13844 posts

    Posted 18 Feb 2011 Link to this post

    Hi David,

    The reported problem is a browser behavior. The content area is a standard editable IFRAME element and the copy process is controlled by the browser and operating system. I was able to reproduce the same problem with an HTML page and editable IFRAME as well as with our competitors' editors.

    The process when copying content from RadEditor and pasting it again in it can be controlled using the OnClientPasteHtml event of the control. Here is an example:

    The OnClientPasteHtml event is also fired when the Paste (Ctrl+V) command is executed. It is useful in scenarios when the pasted content should be modified and inserted in the content area.

    For example when copying and pasting a link or an image with a relative path in Internet Explorer, the browser automatically converts the path to absolute. The code below demonstrates how to attach to the OnClientPasteHtml event and strip the desired url path using the StripPathFilter content filter. The StripPathsFilter() method receives as a parameter an array of strings (devided by a white space) that will be stripped from the absolute path.

    <script type="text/javascript">
    function OnClientPasteHtml(sender, args)
    {
        var commandName = args.get_commandName();
        var value = args.get_value();
        
        if (commandName == "Paste")
        {
           // The StripPathsFilter() method receives as a parameter an array of strings (devided by a white space) that will be stripped from the absolute links.
            var domainName = "http://" + window.location.host; //returns the hostname and port number of the current URL
            var filter = new Telerik.Web.UI.Editor.StripPathsFilter([domainName]); //strip the domain name from the absolute path
                        
            var contentElement = document.createElement("SPAN");
            contentElement.innerHTML = value;
            var newElement = filter.getHtmlContent(contentElement);
            alert(newElement.outerHTML);
            args.set_value(newElement.outerHTML);  //set the modified pasted content in the editor
        }
    }
    </script>

    Please, note that the OnClientPasteHtml event fires the Paste command only when the StripFormattingOnPaste property is not set to "NoneSupressCleanMessage". In this case the editor does not process the pasted content and pastes it without modifications.

    However, it is not possible to control the paste process in MS Word, because this program does not offer API for handling the paste process.

    Best regards,
    Rumen
    the Telerik team
Back to Top