LinkManager OnClientPasteHtml <a> Tag Manipilation

[Liam]

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:[e-mail]?subject=domain.com feedback">mailto:[e-mail]?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 :)

[Liam]

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

Slight edit required there...

[Marin Bratanov]

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

[Liam]

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.

[Liam]

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?

[Marin Bratanov]

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