Fixing WordPress’ Eating of HTML div Tags

FCK Editor Logo
TinyMCE Logo

I should have known that not all would be rosy in my move to WordPress. It seems that core WordPress’ default implementation of TinyMCE consumes <div> tags in hand-coded HTML posts for breakfast, lunch, and dinner. That behavior has caused me no end of headache as I’ve tried porting the HTML pages from my old completely hand-coded website as WordPress has mangling those finely-coded masterpieces <sic> beyond all normal recognition.

A little googling and I uncovered lots of discontent on the topic along with a few hacks and a hackish plugin, none of which I really want to implement in given WordPress constant upgrade cycle. The suggestions to fix this in core were so well received that I was surprised that the topic does not appear to have been addressed by the core WordPress team.

However, I was finally able to stumble upon a plug-in called Dean’s FCKEditor For Wordpress that appears like may solve the problem by simply replacing TinyMCE with FCKEditor.  Don’t know if this is going to be my panacea or not, but after installing it the first thing I notice is how FCKEditor’s normal fonts are too small for my tastes (I guess I’m going to have to dive in and figure out how to change that.)

If Dean’s plugin does not ultimate solve that problem I ran across two other plugins worth considering. The heavyweight TextControl Plugin and the lightweight Disable wpautop Plugin. I’ll revisit this issue and those plugins in the future if the topic becomes obviously worth revisiting.

9 comments ↓

#1 Ray on 07.17.08 at 4:00am

I’ve been tearing out what little hair I have left trying to get Wordpress to honour html code, particularly line breaks and paragraphs.
FCKEditor does the job and is a worthy replacement for the included TinyMCE.
I’m pleased I found this post, thanks.

#2 MikeSchinkel on 07.17.08 at 8:56am

Heh. Yeah, you know I’m still having occasional trouble, and when I upgrade to 2.6 (very soon now) I fear that this won’t work. Ah well, ain’t being on bleeding edge grand?

#3 Joe Banks on 07.18.08 at 12:33pm

We’ve gone through a similar switch, from TinyMCE Advanced (which causes us additional issues with caching, esp. when we upgrade, being behind a slow-to-update proxy) to FCKEditor, due to the removal of P and BR tags and stripping/rewriting of code.

Additionally, we now also use the Disable WPAUTOP by _default_.

We love the button on the FCKEditor toolbar to “ShowBlocks,” which we now turn “on” by default by editing the . Try it! It’s the other toolbar button with a magnifying glass over a document (has a “” on the document). When selected, it shows you all your blocks: divs, pees, blockquotes.

What we edited in Dean’s FCK Editor plugin:

1. fckeditor_for_wordpress/custom_config_js.php

// Added these lines at bottom

FCKConfig.FontFormats = ‘p;h3;h4;h5;h6;pre;address;div’ ; // JHB3. Removes h1 and h2 from Formats. We don’t use h1 and h2 in content; reserved for template layout only.

FCKConfig.StartupShowBlocks = true ; // JHB3. This is great for visual editing!

And then we customized our toolbar, removing references to font and sizes (not needed, with predetermined CSS).

2. Then we edited the
fckeditor_for_wordpress/fckeditor/fckstyles.xml to replace those peskily annoying default styles with ones that make sense in our websites.

The next thing we want to implement is how to easily import appropriate classes as styles in the toolbar. THAT is a useful feature of TinyMCE Advanced.

However, we do see that the new version of TinyMCE Advanced, for WP 2.5 (so we’ll use FCKEditor until we upgrade) only, allows you to disable WPAUTOP and keep your paragraphs. So we’ll try it out, when we upgrade WP to 2.5.

Please feel free to keep in touch for further questions.

#4 FCKEditor’s ShowBlocks Feature ROCKS! | MikeSchinkel.com on 07.18.08 at 8:15pm

[…] WordPress’ default TinyMCE editor eating my hand-coded HTML tags.  Well Joe Banks left a great and detailed comment giving several tips including one about the ShowBlocks button. Unfortunately the default comment […]

#5 MikeSchinkel on 07.18.08 at 8:30pm

Joe: Many thanks for the comment; I definitely learned something as my follow-up post can attest! Agreed on the move to 2.5; if TinyMCE won’t cause problems I’ll stick with it because I like to work with what’s standard as much as possible.

Also, for other readers who were also curious of what the ShowBlocks button looks like, check it out here:

http://mikeschinkel.com/blog/fckeditors-showblocks-feature-rocks/

#6 Joe Banks on 09.16.08 at 1:08pm

Hi Mike,

Funny thing. I came back here via Google, now that I’ve set-up some client sites with WP 2.6.x, and installing the preferred text editor plugin TinyMCEAdvanced. And doing a search for how to remove H1 and H2 from the Paragraph dropdown, so client doesn’t accidentally use them in their page (Theme already uses them). And here I am, back again to this site! (Still looking for an answer to the “H1 H2″ question)

True: TinyMCEAdvanced is my favorite again, if a client needs to be able to insert a Cforms form or have access to other similar plugin buttons that automatically get added to the Visual Editor.

But: if the client is behind some big proxy, look out! Changes in TinyMCE Advanced settings may take as much as a day to show up, and sometimes, the visual editor doesn’t show up at all for days! I think I found the answer to that via the TinyMCEAdvanced Plugin site comments: “Can you try to disable caching and compression in tiny_mce_config.php (change them to false)”

The ShowBlocks feature of FCKEditor still rocks, though!

[Plug: Yes, last time I left out my website URL on purpose. With this comment, I’ll put in my “professional” site URL, officially due out end of this year… ]

#7 Joe Banks on 09.16.08 at 1:21pm

“Can try to disable caching and compression in tiny_mce_config.php (change them to false)”

Sorry: This file is NOT in the TinyMCEAdvanced plugins directory, it’s here in the WP core includes folder (so change it with every WP upgrade! LOL):

/wp-includes/js/tinymce/tiny_mce_config.php

‘disk_cache’ => false,
‘compress’ => false,

I’ve tried this in one site, testing on others. May be back again soon. Will have to wait until I install WP 2.6 on pesky proxy server to fully test this setting

#8 When Things Go Really Wrong: Fixing layouts trashed with improper div tags | Website In A Weekend on 03.18.09 at 11:16am

[…] Mike Schinkel’s take on the matter. […]

#9 Estilos personalizados en wordpress fckeditor plugin « El Truco on 04.19.09 at 5:06am

[…] Más info en http://mikeschinkel.com/blog/fixing-wordpress-eating-of-html-div-tags/ […]

Leave a Comment