7/08/2013

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.

No comments :

Post a Comment