Prevent the Editor From Moving My  

Question

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">&nbsp;</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>&nbsp;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.

Answer 1

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.