My take on the Wordpress Rich Text Editor

Note: This post is over a year and a half old. You may want to check later in this blog to see if there is new information.

The following links are auto-generated but may help you locate newer content:

I post to Wordpress from TextMate, but I make a lot of sites for clients using Wordpress and for them, this isn’t an option. The built in Wordpress Rich Text editor is actually one of the better solutions I’ve found for my clients. I’ve tried quite a few options, but my goal is to give them something allows them some editing freedom but gives me the ability to keep them within strict XHTML standards and design guidelines. Nothing quite made the grade for me, so I started hacking away at the installation of tinyMCE that comes with Wordpress. It’s been requested that I share this code, so here’s the code and a rundown of how to customize it.

Download this file and install it over the tinymce directory in wp-includes/js/. After you’ve backed up the original directory, of course.

The first file I edited was tiny_mce.js. I’m not going to go into a lot of detail on that one, but I changed the code to stop wrapping images in extraneous tags, and just apply classes directly to them. If you’re curious, run a diff on the original file and take a look at the changes. But for now, let’s just trust that it’s an improvement.

The next file that you’ll definitely want to look at is tiny_mce_gzip.php. This file controls what menu options show up in the menu and what options are available in the dropdowns. If you jump to line 137 in the file from the above package, you’ll see an initArray that has my custom edits included.

I added a few custom classes that I now define in both the editor.css file and the style.css file for each theme. They’re in the line that starts with “theme_advanced_styles :” on 145. You can add whatever you like there and then style them however you want in the CSS. When we add the styles dropdown menu, it will give you or your clients access to custom styles that you can use instead of font tags and other nasties.

There’s a line:

theme_advanced_blockformats : "p,h2,h3,pre,blockquote",

that determines what formats are available in the format menu. If you’ve styled h2 to be article headlines and don’t want it used inside of articles, take it out. You get the idea, right?

The dropdown menus are added on line 148:

theme_advanced_buttons1_add_before : "formatselect,styleselect",

There are a lot more options, all of which are available in the tinyMCE documentation. Have fun making a fully XHTML compliant rich text editor, for yourself or for your clients!