Plugins and hacks for improving the WordPress TinyMCE editor

The WordPress TinyMCE editor mercilessly strips tags at will. Some will tell you that in order to avoid this problem you should disable the visual editor, but this is not a realistic solution since a. Many people feel more comfortable using a visual editor and b. The editor should not remove code from the coding editor, period.

This problem is becoming even more acute with the proliferation of embeddable services available on the web for easily sharing rich content like videos, slideshows, and documents. In order to display these services on your blog, you need to embed the code within your post, but doing so will often break your blog layout since the divs are stripped.

There are many topics on the WordPress forum related to this issue, none of which have been resolved satisfactorily. The question is – do the folks behind WordPress have any intention of fixing this problem?

How to fix it

A few days ago I wrote about a way to make the WordPress TinyMCE text editor stop stripping div tags. The original code that I wrote didn’t work, but I subsequently found a solution that I tested and did work, and have since corrected the original post.

While I was searching for a way to get the hack to work, I found a bunch of other hacks and plugins that help you force the WordPress editor to stop stripping tags, or show you how to customize the editor. So here are some other options you may find useful:

Plugins:

TinyMCE Advanced – Among the many things this plugin does, it says it supports XHTML specific tags and (div based) layers. This may mean that it doesn’t strip div tags.
Disable wpautop Plugin – This plugin disables the WordPress wpautop function. The wpautop function changes double line-breaks in the text into HTML paragraphs (...), and this plugin disables that annoying feature.

Hacks:

To stop the WordPress editor from stripping out div tags, replace line 25 in the wp-includes/js/tinymce/plugins/tiny_mce_config.php file with the following: $valid_elements = ‘#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]’;
(This method was described in my previous post on this subject.)
To stop the editor from removing line breaks, open wp-includes/formatting.php, and change line 402 to this: $content = str_replace(' ', ' ', $content);. Alternately, you can use .
To get the advanced toolbar functions to open by default, instead of needing to click on the Show/Hide Advanced Toolbar button, open wp-includes/js/tinymce/tiny_mce_config.php and change line 34 to read $mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'fontselect', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo')); (via 1000 Miles or Bust)

That’s it for now. I’ll probably update this post as I find more information on hacking the TinyMCE editor.

Ryan

The latest (beta) version of SMF features a nice wysiwyg text editor. I wish this would be provided as the default style text editor for WordPress comments and the administrators/editors have access to a full blown pure HTML editor instead of having to worry about stripped tags and what not.

I have test site for SMF2 up, which you can try their new editor on if you like … http://ryanhellyer.net/test/smf2/index.php?action=post;board=1.0
Miriam Schwab

@Ryan – that is a great editor! It’s really smart, since as you said, it gives administrators access to an HTML editor, which makes sense since administrators are trusted users who should be able to have full control over their HTML.
Ryan

Miriam – your attempt at embedding a YouTube video didn’t work as you aren’t able to add HTML as a guest. There are plugins available for allowing that though and as an administrator I was able to insert your HTML in directly … http://ryanhellyer.net/test/smf2/index.php?topic=4.0

There is an option in the new version of SMF to allow basic HTML like A, P, IMG tags etc. for all users, but I haven’t got that activated at the moment.

I really don’t understand why WordPress does things the way it does. It’s the only thing which really irks me about the software. SMF annoys me for many other reasons, but they do seem to have the editor side of things sorted out a lot better than WordPress.

Many VBulletin sites seem to use a similar editor to the new SMF one too.

Oh, I forgot to point out that you need to click the letter ‘A’ on the left hand side of the editor to trigger the visual editor into action. I haven’t figured out how to activate it by default yet and the bbCode version is present until you click the A.
Ryan

Darn it! My post got swallowed again 🙁

What I was trying to say was … the wysiwyg editor wasn’t on by default when you used it, so if you didn’t click the ‘A’ on the page you should go back and take a look now as I’ve set it up to do so by default.

Also, the video you tried to embed didn’t show because guests aren’t allowed to post HTML. There is a plugin for that though and I was able to embed it myself quite easily as I am able to use pure HTML since I’m the admin.

It was interesting to hear the voice behind the blog!
Miriam Schwab

@Ryan – Sorry about the post swallowing. I still have no idea what causes that to happen.

Yeah, my voice. There was an English language radio station in Jerusalem at one point, and I was writing copy for them. The guy then said to me “Do you have any broadcasting experience?” I said to him “Hello? You’re talking to me here. You don’t really want someone who sounds like me to be broadcasting, do you?” He said “Uh, no.”

I made that video because clients kept asking me how to wrap text around images in their sites. I figured I’d just start making short videos for all the questions clients have. The video came out really blurry in YouTube, and I still have to figure out how to get videos to look normal there. Oh well. It’s a first shot.
Ryan

Lol, your voice sounds fine, I would happily listen to you on the radio 🙂

To improve your video quality, I suggest generating your own FLV files. That way you can render them at whatever resolution/quality you want. I use the free version of the Riva FLV encoder. It has lots of options for encoding your videos and I use the WordTube plugin to display them in my WordPress sites.

Here’s a vommit inducing video (low quality) of me warming up for a hockey game with a camera strapped to my head … http://dunedinicehockey.co.nz/gimpcam-2/
Ryan

From Matt Mullenweg’s recent post on WordPress.org about the new stable version of WordPress … http://wordpress.org/development/

“Friendlier visual post editor — I’m not sure how to articulate this improvement except to say “it doesn’t mess with your code anymore.” We’re now using version 3.0 of TinyMCE, which means better compatibility with Safari, and we’ve paid particular attention this release to its integration and interaction with complex HTML. It also now has a “no-distractions” mode which is like Writeroom for your browser.”

This explains a problem I was having yesterday in that I couldn’t understand why my code wasn’t being corrected when I clicked save 😛
Tolana

Using WordPress 2.6.3 tonight, the editor was definitely stripping line breaks out. I’m not sure what other things it might be doing, but I am certain about the line breaks.

The code is different, but your post helped me find the code to change. In wp-includes/js/tinymce/plugins/tiny_mce_config.php you’ll find a list of items under $initArray = array ( … There is a statement where you just change ‘true’ to ‘false’ —

‘remove_linebreaks’ => true,

There are a couple of other lines I may play with later (for now I am happy to keep the line breaks). These are:

‘relative_urls’ => false,
‘convert_urls’ => false,
simon

Hi

we are desprate to inlcude iframes in our wp pages – wp 2.6.3 plus tincymce extended – cud u possibly kindly assitss?
Ryan

Simon – you may be better of asking that question over at the TinyMCE site.
Jon

Excellent tip. I was having a nightmare adding line breaks to create spaces beneath images. In my formatting file the line to edit was actually 608, so maybe this needs to be updated. Could be a WordPress 2.7 change?
Pingback: WordPress 2.5 released - and WordPress.org gets a makeover | Wordpress Garage()
Pingback: Make WordPress editor stop changing code | Wordpress Garage()
SharkGirl

Can you tell me what’s supposed to be on line 402? I don’t want to replace something that was needed.

402 on my page shows: $double_chars[‘out’] = array(‘OE’, ‘oe’, ‘AE’, ‘DH’, ‘TH’, ‘ss’, ‘ae’, ‘dh’, ‘th’)

Also, the config file for the editor is not where you said it is. I’m using WPMU 2.7 The js directory only has subdirectories.
Mister Peabody

Jon – BRs after images? What the H E double hockey sticks are you doing? Change our IMG spacing in the CSS, and save yerself a wealth of problems later.
Pingback: Wordpress line break bug in posts | ChrisDigital.com()
Lachlan

Does this still work for WordPress 3.0?
Adrian

To stop the editor from removing line breaks, open wp-includes/formatting.php, and change line 402 to this: $content = str_replace(' ', ' ', $content);. Alternately, you can use .

In WP3.0.5 is line 952
- Miriam Schwab
 
 @Adrian in general, it’s highly recommended to avoid editing core WordPress files. I’m writing up a post with another workaround that doesn’t involve editing core WP files, and I’ll let you know here once it’s up.

Plugins and hacks for improving the WordPress TinyMCE editor

How to fix it

Plugins:

Hacks:

Author: Miriam Schwab

Read previous post:

Amazing hack for fixing the code changing habits of the WordPress editor