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 Replies to “Fixing WordPress’ Eating of HTML div Tags”

  1. 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. 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. 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. 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… ]

  5. “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

Leave a Reply

Your email address will not be published. Required fields are marked *