LinkManager OnClientPasteHtml <a> Tag Manipilation

6 posts, 0 answers
  1. Liam
    Liam avatar
    4 posts
    Member since:
    Jul 2016

    Posted 20 Jul Link to this post

    Hello,

    I've added some logic to the OnClientPasteHtml method in Javascript, which ensures that the <a> tag has a href of "#" and adds a OnClick attribute. We're doing this so that mailto links are (roughly) encoded, so bots do not spam the email address, etc.

    This is my code:

     

    function OnClientPasteHtml(sender, args) {
        var commandName = args.get_commandName();
        var value = args.get_value();

    if (commandName == "LinkManager" || commandName == "SetLinkProperties") {
            breakme: if (/href="mailto:([^@]+)@([^?"]+)(?:\?subject=([^"]+))?[^>]+>([^<]+)/i.test(value)) {
                var valueSplit = value.match(/href="mailto:([^@]+)@([^?"]+)(?:\?subject=([^"]+))?[^>]+>([^<]+)/i);

                // Email address
                if (typeof valueSplit[1] == "undefined" || typeof valueSplit[2] == "undefined") {
                    break breakme;
                }
                var addrPrefix = valueSplit[1];
                var addrSuffix = valueSplit[2];
                // Subject
                var subject = '';
                if (typeof valueSplit[3] !== "undefined") {
                    subject = valueSplit[3];
                }
                // Text
                var linkText = '';
                if (typeof valueSplit[4] !== "undefined") {
                    linkText = valueSplit[4];
                }

                // Final output example = <a onclick="href='mailto:'+'first.name'+'@'+'domain.com'+'?subject=hello world'" href="#">Email Me.</a>
                var valueFinal = '';
                if (Prototype.Browser.IE) {
                    // TODO: Fix IE bug
                }
                else{
                    valueFinal = "<a onclick=\"href='mailto:'+'" + addrPrefix + "'+'@'+'" + addrSuffix + "'+'?subject=" + subject + "'\" href=\"#\">" + linkText + "</a>";
                }
                args.set_value(valueFinal);
            }
    }

     

    It works perfectly, in Firefox, but I seem to be getting odd results in IE (and possibly Chrome).

    When I debug in IE, I can see that valuFinal is in the correct format, but then when you click or view html, the <a> tag changes, to this:

    <a onclick="href='mailto:'+'website'+'@'+'domain.com'+'?subject=domain.com feedback'" href="mailto:website@domain.com?subject=domain.com feedback">mailto:website@domain.com?subject=domain.com feedback</a>

    As you can see, the href is not a "#" and the link text is being replaced by the same mailto link.

     

    I use Sitecore.NET 7.2 (rev. 140526), which is using Telerik 2012.1.607.35 DLL version.

    We don't really want to upgrade any versions so a fix for my current state will be ideal.

    Any information will be great! Thanks :)

  2. Liam
    Liam avatar
    4 posts
    Member since:
    Jul 2016

    Posted 20 Jul in reply to Liam Link to this post

    Sorry, I meant to type "(roughly) encrypted", not "encoded".

    Slight edit required there...

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 22 Jul Link to this post

    Hello Liam,

    The only thing I can think of is that IE changes the attributes of the anchor tag itself. You can try testing the HTML you provide vs the HTML IE returns in the attached editable iframe (in IE you will likely have to unblock the content to run the page). If this manifests the same issue, then it is the browser's features and there is nothing you could do about it. IE tends to attempt to fix and even create links from the text and we have no control over this.

    In the meantime, I can also suggest a few other ideas:

    • try disabling the built-in filters of the editor, starting with ConvertToXhtml: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/content-filters.
    • test with the latest version (R2 2016 SP1 at the time of writing) and if the issue does not occur with it, I advise you consider an upgrade. The 2012 version is extremely old and we have improved just about every aspect of the editor since then, and we have also added support for the current browsers (including current IE version, your supports up to IE9)

    I must also note that we do not support Sitecore and it is possible that a CMS feature, control extension or event handler Sitecore adds to RadEditor is the cause of the issue.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Liam
    Liam avatar
    4 posts
    Member since:
    Jul 2016

    Posted 25 Jul in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thank you very much for your reply and help, I really appreciate it.

    I tested my example link (<a onclick="href='mailto:'+'first.name'+'@'+'domain.com'+'?subject=hello world'" href="#">Email Me.</a>) in all versions of IE, using your attached editable iframe. It works and does not show any inconsistencies like my Sitecore environment is. Very odd but a good thing I guess, as this means it can be fixed and that the browser isn't 100% overriding it.

    I haven't tried the other points you mentioned but now knowing my above response, is there anything else you recommend?

    Either way I'll raise a ticket with Sitecore as they might be able to resolve this issue also :)

    Kind regards.

  6. Liam
    Liam avatar
    4 posts
    Member since:
    Jul 2016

    Posted 01 Aug Link to this post

    I have managed to pinpoint the exact cause of this issue! Also, It isn't browser compatibility, as it occurs in all browsers.

    It's when you do the above code (that works perfectly) then click on the URL text in the editor - for some reason, when just simply clicking, "something" changes the code to have a HREF as mentioned above, etc.

    Can anything be done to fix this please?

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 02 Aug Link to this post

    Hello Liam,

    RadEditor does not change the link on click itself (you can test in our demos here). The only thing we do is add a "return false" statement to prevent the redirect when in Preview mode. I am attaching here a short video that shows the expected behavior.

    With this in mind, I advise that you reach out to the Sitecore support team for help with their implementation and the old version they are using.

    Regards,

    Marin Bratanov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017