WordPressGarage.com

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:

1. 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.
2. Disable wpautop Plugin - This plugin disables the WordPress wpautop function. The wpautop function changes double line-breaks in the text into HTML paragraphs (<p>…</p>), and this plugin disables that annoying feature.

Hacks:

1. 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.)
2. To stop the editor from removing line breaks, open wp-includes/formatting.php, and change line 402 to this: $content = str_replace('<br />', '<br clear="all" />', $content);. Alternately, you can use <br clear=”none”/>.
3. 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.

Posted in Tips | Tags: WYSIWYG | 7 Comments »

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

Update March 23, 2008: The code that I originally wrote below based on Roland O’Connor’s post didn’t work. I subsequently found this WordPress Forum topic, which had the correct code to replace, and I’ve corrected the post below.

Also, I wrote a follow-up post to this one with more tips on using plugins and hacks for fixing this editor problem. So read this post, and then check out Plugins and hacks for improving the WordPress TinyMCE editor

Have you ever embedded code in your WordPress editor, only to find that saving the post causes the code to change and your whole blog’s layout to break?

Have you ever tried to use divs in your WordPress editor, only to find that all your div tags have been replaced with p tags?

Well, despair no further! Roland O’Connor has written about an easy solution that fixes this problem.

Here’s what you do:

1. Find the file wp-includes/js/tinymce/tiny_mce_config.php.
2. Find the line
   $valid_elements='p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]‘;
3. Change it to
   $valid_elements ='-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]‘;
$valid_elements = '#p[*],-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],
-li[*],*[*]‘;


Make sure all the code is on one line. That’s it!

The only problem with this hack is that you have to remember to redo it every time you upgrade your WordPress blog. Unless of course someone feels like making this into a plugin…hint hint, wink wink, nudge nudge.

Posted in Tips | Tags: WYSIWYG | 10 Comments »

Shortcut and plugin for advanced editing options in the WordPress editor

There is a demand for more editing options when entering posts in WordPress. As I mentioned here before, Dean’s FCKeditor for WordPress plugin allows you to replace the standard WordPress editor options with the well-known FCKeditor.

But this has two drawbacks: 1. The plugin is huge; 2. FCKeditor puts too much formatting power in the hands of the user. You may find that if you install FCKeditor on a site, you will eventually find the site littered with huge red text and tiny green underlined text (believe me, I’ve seen it happen!).

Shortcut

So here’s a little-known secret about the WordPress editor in version 2.1 and up: it has many more options - they are just hidden! If you press alt+shift+v in Firefox, or alt+v in IE, a second row of buttons will appear on the editor with the following options:

• a formatting drop-down box with options like Paragraph, Heading 1, Heading 2, etc.
• underline
• justify
• font color
• paste as plain text
• paste from Word - essential for getting rid of all the junk code Word adds
• remove formatting
• clean up messy code
• insert custom character
• undo and redo

Plugin

If you don’t want to have to remember shortcuts, or you are creating a site for clients and want to make their lives easier, Chris Kasten from Solo Technology has created a plugin that places a toggle button on the end of the default toolbar that, when pressed, opens the second row of buttons. Now you have more control over the formatting at the click of a button!

Visualize Advanced Features plugin>>

Posted in Plugins | Tags: WYSIWYG | No Comments »

Dean’s FCKEditor for WordPress plugin

From DEAN LEE:/DEV/BLOG:

FCKEditor is a full feature web based WYSIWYG html editor,the best things is that:FCKeditor is compatible with most of the internet browsers which include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7,and claims to produce clean and valid XHTML 1.0 output.

Dean’s FCKEditor for WordPress plugin(V1.2)>>

Posted in Plugins, WordPress as CMS | Tags: WYSIWYG | No Comments »