Advanced WYSIWYG in WordPress 2.1 : Just Some Dot Com

Holy CRAP!

Hitting ctrl+alt+V in Firefox or ctrl+V in IE turns the merely adequate WYSIWYG editor that comes standard with WordPress 2.1.* into something much more robust and useful. It adds some HTML snippets, like headings, in a drop down menu, and it adds some extra functionality for pasting as plain text or from Word. Some of these functions were the reason I went looking for ecto, the third-party editor I still use, but ecto is not available to me if I’m not at my home computer. This next bit will be mind-numbingly boring so I’ll use my newly visible “More” button to put the rest of the post “after the jump.”

UPDATE 3: I’m reverting back to the original setup. The rich text editor (the “advanced” one) stripped out all the stylesheet-related DIVs from within any posts that I attempted to edit within it, ruining my images layout. David tried to fix this behavior, but the rich text editor is being rather… persistent. I’ve cleared cache, and may try again in a few days.  

UPDATE 4: Got it working! Fixed the DIV stripping, also using a plugin that puts the extended functionality icon in the right place on the icon bar,  and added a plugin that adds custom HTML tags to the CODE tab (and if I really wanted to, I could have David create buttons for the Visual tab). I’ve disabled the WP-WYSIWYG by “Mudbomb“, which would not support the “More” functionality.

For more information about the process, which was pretty fraught, click the link to read “more.”

Who knew this useful functionality was out there in 2.1?

Apparently, an earlier post at Solo Technology and also a better solution in a comment there pointed out various ways to customize this advanced editor, such as either making it appear permanently, or to put the toggle on/off button and other useful buttons on the “standard view” toolbar. It all started in a WordPress support thread that mentions several possible customizations (including some that might not be a good idea, read to the bottom of the thread!). There is one big problem, though – through some type of code-snob wonkery, the standard WordPress rich text editor strips out DIV tags, which needs to be corrected. But of course, somebody (or several somebodies) have posted solutions, so it’s a matter of finding the best one.

This has big implications for my beloved drop shadows on images, which are DIV-dependent. And I may have to go back and re-edit an old post on that subject, for this very reason, but not tonight. As a test, I’m going to try to put drop shadows around this thumbnail of a certain laundry-obessed feline. It appears to be working in preview mode – the shadows are visible now that I’ve saved. I still have to flip over into the “CODE” tab in the standard WordPress rich text editor to add the DIV tags, which are pre-loaded in a little snippety Firefox extension. So now it remains to be seen if the DIVs are still being stripped, or if there’s something I can do about that with David’s help.  

UPDATE: Hmm. Well. Yes, it still strips the DIV tags, which still looks OK in Firefox, but terrible in Internet Exploder, because IE uses a different type of background image, and the block element it sits in is expanding to fill the width of the post. From what I recall, the second DIV that has the clearing element looks even worse if I wanted the image to sit up on top of a block of text. So I’ll be asking David to fix a few bits of TinyMCE’s code. End of UPDATE.

Further Update: David has made the following modifications…

1. Installed the Visualize Advanced Features plugin to put the button to toggle the advanced toolbar where it belongs… on the standard toolbar.
2. Edited the tiny_mce_config.php file to stop TinyMCE from stripping DIVs out and turning them into P tags (it took a couple of tries).
3. UPDATE 3: Realized that the first fix wasn’t working, the second fix wasn’t working, and all the “img-shadow” and “floatclear” DIVs within posts were being stripped out by WP’s rich text editor, whether the advanced toolbar was visible or not.  

I had been using a plugin called WP-WYSIWYG by “Mudbomb” to get around the DIV-stripping problem, but it can’t do an extended entry, and the guy seemingly ignores the dozens or hundreds of requests to add “more,” “code,” and other extremely useful buttons to his array. One commenter had added drily, “Is it possible to get a response to questions posted on this site?” It’s a good plugin, but not perfect, and it was annoying to have to jump through hoops just to do a short intro/long extended post type of entry.

Unfortunately, I have to revert to WP-WYSIWYG and hope that “Mudbomb” eventually gets around to adding several very useful functions, such as the “more” button,” that people are clamoring for. At least for posting away from my laptop – I’ll use ecto more, but it doesn’t have the handy “color” buttons the rich text editors had. Drat.

At least ecto handles the “HTML only” side with no fuss or bother.

Further Further Update: After some more tinkering, it’s all working now, and I’m no longer using the WP-WYSIWYG plugin. As I detailed above, I’ve also added a handy plugin where I can set custom HTML snippets and add them easily using the “CODE” tab. I could even turn them into buttons that would appear on the “VISUAL” tab if I really wanted to – so now I have the drop shadows and a few other frequently used snippets handy on my main WP installation, in addition to having them loaded on ecto.

I’m good to go, thanks to David and the other good folks that posted the information about the extended toolbar, the various fixes, and the plugins.