Upper case HTML elements in Drupal with TinyMCE
- 7th January 2011
I’ve just spent a while trying to fix a really annoying little problem using TinyMCE in Drupal 6, so thought I’d share the solution.
My client was entering content into a TinyMCE text field and had complained that the spacing between paragraphs and list items was too big. On inspection I noticed that TinyMCE was adding a <br> at the end of every line, and also that all the HTML tags coming from TinyMCE were in upper case. This caused two issues:
- The page did not validate correctly
- Although browsers interpret the HTML, CSS selectors using elements weren’t working (styles are applied to "p" asdasd elements and not to "P")
After a while playing around with WYSIWYG settings in Drupal, I noticed that I had the "Teaser Break" option switched on unnecessarily (I decided to use a separate text area for the teaser to allow the client to change it independently of the page content). By switching this off it fixed the problem!
So, in Drupal, go to Administer -> Site configuration -> Wysiwyg
Select your TinyMCE input format (usually "filtered HTML"), select "Buttons and plugins", then deselect "Teaser break".
Re-save your content and the HTML is now back to normal.