I know variations on this have been asked all over the WordPress world, but I can’t seem to find what I’m looking for. I have HTML that looks like this:
<a name="title-slug"> </a>My Section Title
I find that if the anchor tag is empty, browsers tend not to scroll precisely to it when the name fragment is added to the URL. So, I want to have the mark up shown above. The problem is that when I enter that markup into the “Text” tab of the editor and switch to “Visual” mode, TinyMCE changes it to this:
<a name="title-slug"></a> My Section Title
I have a filter on tiny_mce_before_init similar to the one shown here where I set the entities key to allow for , but I have no idea why it’s moving the space outside of the anchor tag.
I tried using the extend_valid_elements setting like this: 'a[name|class|id|text|href|style|target|rel|#text]', but that only made things worse (two where added after the anchor and it was still emptied). Any help is greatly appreciated.
It’s a simple solution/workaround, but a Shortcode could be used.
As birgire noted, the whole anchor can be the Shortcode.
And for ease of use, this article has a solution: adding a shortcode button in TinyMCE. You could have a dropdown with a selection of anchors, turning the fight in your favor 😉 WP editor is really a PITA when it comes to this kind of characters/entities control.
And the best related Shortcode -> TinyMCE answer that I found here at WPSE.