Javascript: Workaround needed: Internet Explorer changes link text when changing the href

Question

Hello all,

I have a problem as follows: We're using a rich text editor (TinyMCE, but that's not important here, I think) in our application. Now, with Internet Explorer 8, we've noticed that if you type in content that looks like a web address:

www.google.com

...IE helpfully converts it to a link by some native-to-browser functionality. Now if you really want to make it into a link, and choose to edit link properties, and set the href e.g. to

www.google.com/analytics

...then when the javascript sets the href attribute of the anchor tag, also the text of the link changes. The desired result is:

`<a href="http://www.google.com/analytics"&gt;www.google.com&lt;/a&gt;`

but actually is:

`<a href="http://www.google.com/analytics"&gt;www.google.com/analytics&lt;/a&gt;`

Does anyone know a way to work around this?

Update: This behavior has only been observed in Internet Explorer 8 and 7. Firefox, Chrome, and Safari are not affected. The problem can also be observed on the TinyMCE websitehttp://tinymce.moxiecode.com/examples/full.php, so it's probably not a TinyMCE configuration issue.

Answer 1

Need more information:

1. Does it behave the same way in other browsers?
2. Are you typing this into the rich text area, or the html view?
3. Have you configured TinyMCE properly? Sounds like a bug with your particular implementation -- it is not parsing out the HTML tags properly.

Answer 2

After some research and debugging, I found that the problem is caused by built-in behavior of Internet Explorer. It occurs when setting the href-property of a link, whose text-content appears to be an URL (according to IE). In these cases, IE copies the contents of the href-attribute into the link text.

There might be several workarounds for this, but I found that at least this logic works:

1. store the innerHTML into a temporary variable,
2. set the href attribute as usual
3. if innerHTML has changed, copy back the original innerHTML from the temporary variable.

This seems to work because changing the innerHTML of the link does not cause changing of the href attribute.

In tinyMCE, find the following line in setAllAttribs() of functions.js of the advlink plugin:

setAttrib(elm, 'href', href);

...and replace it with this monster:

if(tinyMCE.isMSIE) {
    var tmp = elm.innerHTML;
    setAttrib(elm, 'href', href);
    if(elm.innerHTML != tmp) // optional, but keeps unnecessary innerHTML set:s away
        elm.innerHTML = tmp;
}
else {
    setAttrib(elm, 'href', href);
}

...and your links will appear as if untouched. I also started a thread on the tinyMCE forums about this. If they post some improvements to my solution or tell it's nonsense, I'll update this question also.