Anchors inserted via the TinyMCE editor create an empty <a> tag with only a name and id. These work ok in non-IE browsers, however, IE does not like empty tags. Any link to an empty <a> tag is ignored.
How can I make a list of links at the top of a page that jump down the page correctly?
Also, any idea why IE supports #Top while Firefox does not?
If you need to create a anchor that takes the visitor to the top you should be able to reference an id like your #wrapper or whatever you call your main containing <div>...so <a href="#wrapper">To the top</a> should do the trick, right?
If you're having problems with the code being stripped you could have a look to see what is allowed and edit what is allowed in the tinymceeditor.config file in the config folder.
You can also disable tidy in the umbracosettings.config file in the same dir. However this is not recommended.
The problem is not with the return to top. It's with the target in the lower content. Say in an FAQ scenario... I click next to the answer, click the anchor icon and enter Target1. TinyMCE then creates an HTML tag in the format <a id="Target1" name="Target1"></a>, notice the <a> tag is empty. IE does not work with this empty tag.
I was just experiencing this bug as well on chrome. The bug has been tracked on codeplex - http://umbraco.codeplex.com/workitem/30147 and it appears the webkit replace is not working. I commented out the following lines:
The file: /umbraco_client/tinymce3/themes/umbraco/js/anchor.js lines 28 through 32. It has been working so far without ill effects. Props to mirelabudaes for finding a workable solution.
In wich file did you change this? Ik tried changing umbraco_client/tinymce3/themes/umbraco/js/anchor.js but umbraco still seems to use te "old" code and I don't have a clue where it's coming from. I've updated the file to the latest version of the stable tinymce build btw:
tinyMCEPopup.requireLangPack();
var AnchorDialog = {
init : function(ed) {
var action, elm, f = document.forms[0];
this.editor = ed;
elm = ed.dom.getParent(ed.selection.getNode(), 'A');
v = ed.dom.getAttrib(elm, 'name');
if (v) {
this.action = 'update';
f.anchorName.value = v;
}
f.insert.value = ed.getLang(elm ? 'update' : 'insert');
},
update : function() {
var ed = this.editor, elm, name = document.forms[0].anchorName.value;
if (!name || !/^[a-z][a-z0-9\-\_:\.]*$/i.test(name)) {
tinyMCEPopup.alert('advanced_dlg.anchor_invalid');
return;
}
tinyMCEPopup.restoreSelection();
if (this.action != 'update')
ed.selection.collapse(1);
elm = ed.dom.getParent(ed.selection.getNode(), 'A');
if (elm) {
elm.setAttribute('name', name);
elm.name = name;
} else
ed.execCommand('mceInsertContent', 0, ed.dom.createHTML('a', {name : name, 'class' : 'mceItemAnchor'}, ''));
tinyMCEPopup.close();
}
};
tinyMCEPopup.onInit.add(AnchorDialog.init, AnchorDialog);
The anchor.js was the location you noted umbraco_client/tinymce3/themes/umbraco/js/anchor.js
However, in my case there was no update made on TinyMCE other than the change that I noted above.
I know this is lame but did you ensure that you cache had been cleared prior to testing. I had the same issue with it not working until I cleared my browsing data in Chrome and trying to place the anchor tags again.
Also I see that the following code is new: and is not what I have in my working copy.
elm = ed.dom.getParent(ed.selection.getNode(),'A'); if(elm){ elm.setAttribute('name', name); elm.name = name; }else
In my copy the following is occuring on every update call:
No not weird since the issue tracker has been moved to http://issues.umbraco.org since september 2012 and all open issues from codeplex was moved to the new tracker.
The best way is to just use the search function in the new issue tracker. For example, you could search for "30147" which was found in the old http://umbraco.codeplex.com/workitem/30147 codeplex URL.
Howevever, in this case, it seems this issue was not migrated, so the next best bet is to search for related issues using other keywords. If that still does not yield any results, you can always create a new issue.
I think unforuntately only the "open & active" issues were migrated so any kind of historical tips or hints on older issues may have been lost or at least are not visible to non-administrators.
... where editing with Chrome changed anchor tags into empty <img> tags which then didn't work, and Chris's fix solved it for me with no apparent side effects.
It worked for me (Umbraco 4.7.1.1). @lulia, for what it's worth (being over a year), I had to also clear the server cache (by removing the app_data\Temp\ClientDependency folder, and recycling the app pool in IIS). Then I completely cleared the browser cache. Then it worked.
I do wish Umbraco would provide clear documentation on how to do things like correctly clear the browser cache, which often cause problems like this...
TinyMCE Creates Invalid Anchor Tags
Anchors inserted via the TinyMCE editor create an empty <a> tag with only a name and id. These work ok in non-IE browsers, however, IE does not like empty tags. Any link to an empty <a> tag is ignored.
How can I make a list of links at the top of a page that jump down the page correctly?
Also, any idea why IE supports #Top while Firefox does not?
Hi Connie
How do you create your anchors?
If you need to create a anchor that takes the visitor to the top you should be able to reference an id like your #wrapper or whatever you call your main containing <div>...so <a href="#wrapper">To the top</a> should do the trick, right?
If you're having problems with the code being stripped you could have a look to see what is allowed and edit what is allowed in the tinymceeditor.config file in the config folder.
You can also disable tidy in the umbracosettings.config file in the same dir. However this is not recommended.
Hope this helps.
/Jan
The problem is not with the return to top. It's with the target in the lower content. Say in an FAQ scenario... I click next to the answer, click the anchor icon and enter Target1. TinyMCE then creates an HTML tag in the format <a id="Target1" name="Target1"></a>, notice the <a> tag is empty. IE does not work with this empty tag.
Has anyone address this bug? It appears to still occur in Umbraco 4.7.
I was just experiencing this bug as well on chrome. The bug has been tracked on codeplex - http://umbraco.codeplex.com/workitem/30147 and it appears the webkit replace is not working. I commented out the following lines:
/*if (tinymce.isWebKit)
ed.execCommand('mceInsertContent', 0, ed.dom.createHTML('img', { mce_name: 'a', name: document.forms[0].anchorName.value, 'class': 'mceItemAnchor' }));
else*/
ed.execCommand('mceInsertContent', 0, ed.dom.createHTML('a', {name : document.forms[0].anchorName.value, 'class' : 'mceItemAnchor'}, ''));
The file: /umbraco_client/tinymce3/themes/umbraco/js/anchor.js lines 28 through 32. It has been working so far without ill effects. Props to mirelabudaes for finding a workable solution.
In wich file did you change this? Ik tried changing umbraco_client/tinymce3/themes/umbraco/js/anchor.js but umbraco still seems to use te "old" code and I don't have a clue where it's coming from. I've updated the file to the latest version of the stable tinymce build btw:
The anchor.js was the location you noted umbraco_client/tinymce3/themes/umbraco/js/anchor.js
However, in my case there was no update made on TinyMCE other than the change that I noted above.
I know this is lame but did you ensure that you cache had been cleared prior to testing. I had the same issue with it not working until I cleared my browsing data in Chrome and trying to place the anchor tags again.
Also I see that the following code is new: and is not what I have in my working copy.
In my copy the following is occuring on every update call:
Here is what I have:
Hope this helps.
http://umbraco.codeplex.com/workitem/30147 This page is no longer found? Weird?
Not weird at all. Typical.
No not weird since the issue tracker has been moved to http://issues.umbraco.org since september 2012 and all open issues from codeplex was moved to the new tracker.
Cheers,
Jan
Is there any link between the old workitem numbers on Codeplex and the new issue numbers on http://issues.umbraco.org ?
Hello lucyconnuk,
The best way is to just use the search function in the new issue tracker. For example, you could search for "30147" which was found in the old http://umbraco.codeplex.com/workitem/30147 codeplex URL.
Howevever, in this case, it seems this issue was not migrated, so the next best bet is to search for related issues using other keywords. If that still does not yield any results, you can always create a new issue.
I think unforuntately only the "open & active" issues were migrated so any kind of historical tips or hints on older issues may have been lost or at least are not visible to non-administrators.
Thanks Chris Dunsing for your solution, and Funka for your comment.
I had the problem mentioned on these threads:
http://our.umbraco.org/forum/ourumb-dev-forum/bugs/25242-Anchor-not-working-in-TinyMCE
http://our.umbraco.org/forum/using/ui-questions/24203-Anchor-changes-into-img-tag
... where editing with Chrome changed anchor tags into empty <img> tags which then didn't work, and Chris's fix solved it for me with no apparent side effects.
The posted solution did not work for me. (commenting out those 2-3 lines)
Any other suggestions?
It worked for me (Umbraco 4.7.1.1). @lulia, for what it's worth (being over a year), I had to also clear the server cache (by removing the app_data\Temp\ClientDependency folder, and recycling the app pool in IIS). Then I completely cleared the browser cache. Then it worked.
I do wish Umbraco would provide clear documentation on how to do things like correctly clear the browser cache, which often cause problems like this...
is working on a reply...