WordPress / TinyMCE: How to show paragraph tags in HTML editor

WordPress uses a common Javascript-based text editor called TinyMCE. It allows the user to get a semi-WYSIWYG view of their post. Also, depending on the configuration, the user can edit the HTML code that formats the post.

Unfortunately, the default implementation of WordPress' TinyMCE makes it difficult to use for advanced users who need to edit the  HTML. For simplicity's sake, it hides some features and removes others.

One of the most common complaints is that paragraph tags (<p>) don't show up in the  HTML text editor tab.

An easy way to fix this behavior is to install the plug-in called: TinyMCE Advanced.

To install it automatically:

• Go to the your main WordPress dashboard.
• Click on Plugins.
• Click on [Add New].
• Search for "TinyMCE Advanced" -- several options will show up, but I'm referring to the one written "By Andrew Ozz."
• Click on "Install Now."
• Go back to the Plugins menu.
• Click on "Activate" under TinyMCE Advanced.
• Now, go to the Settings menu.
• Choose "TinyMCE Advanced."
• You should see several gray lines at the top which shows the layout of the editor's buttons.
• At the bottom you will see a red box for Advanced Options.
• Check on "Stop removing <p> and <br /> tags when saving and show them in the HTML editor."
• Click [Save Changes].

I'm testing this out in TinyMCE Advanced 3.5.8 on WordPress version 3.5.2.

It seems to work on a GoDaddy server.

I scanned through the PHP files and they don't (on a very quick look-through) appear to do anything suspicious.

A Note of Warning

After installing and configuring this plug-in, it did indeed show paragraph characters in the HTML text editor.

But it also showed inconsistencies with unwanted paragraph tags being added around <div> tags and <!-- comments -->.

Click here to see what I did to stop the unwanted paragraph tags.

TinyMCE: Editor won't accept / deletes IFRAME code.

The Problem: You might be using TinyMCE as a text editor on your form, or on some content management system like MovableType.
And you are trying to embed some kind of video or audio code onto the page. But every time you do, TinyMCE deletes the code.

If the embed code is for an <iframe> then you may have to add a line to TinyMCE's configuration script to get it to work.

Example: You want to embed a YouTube video.

You click on [Embed] under the video and it gives you code like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/LvkITsb9fA0" frameborder="0" allowfullscreen></iframe>

Your TinyMCE editor won't accept it for some reason.

Quick Solution #1 --

See if your embed source -- YouTube in this case -- provides alternate code.
YouTube offers a checkbox that says: [x] Use old embed code:

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/LvkITsb9fA0?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LvkITsb9fA0?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Better Solution #2 --

Depending on your TinyMCE setup, you'll have some code that can be configured to add or subtract buttons and features.

The feature you want to add is put into place using this line of code:

extended_valid_elements : "iframe[src|width|height|name|align]",

Specific Fix: MovableType TinyMCE plugin.

There are a couple of different TinyMCE plug-ins for MovableType 4.

If you are using this one -- https://code.google.com/p/tinymce-mtplugin/ -- you will have to find this file

• /mt-static/plugins/TinyMCE/js/initialize.js

There may already be one exteneded_valid_elements in place for form.

Add the line of code (specified above) after the existing one for the form -- there can be multiple entries for this setting.