Weirdness Explained - TinyMCE decodes and strips < and > entities
I wanted to be able to enter the text "<30" into a TinyMCE block and was finding that it would save once, but then get stripped out by TinyMCE once the page was reloaded.
What's going on here?
TinyMCE is properly encoding "<" as "<", but then the browser is (conveniently?) decoding the entity before it gets to TinyMCE. The editor then assumes you have an unknown tag and promptly strips it out.
The (kind of) fix
Add a space between "<" and "30".
TinyMCE will still get a decoded "<" but will correctly interpret that you are not attempting to make your own tag and will silently reencode it for you.
The (more foolproof) fix
OK, so maybe you can't always (or don't want to) add a space. What else can you do?
It's actually quite simple. Just double encode the entity to "&lt;" before sending it to the browser.
For good measure, do the same for ">"
I'm still not 100% on what causes this problem, because it only happened on one particular site that I was working with.
I think it may have to do with the content areas being in a jQuery UI tab that was initially hidden.