Aug
24
2011

Get rid of those pesky “p” tags in Umbraco’s TinyMCE Editor

I love Umbraco, but one thing that annoyed me about Umbraco’s TinyMCE 3 editor is that it ALWAYS adds a pesky little <p> tag at the top of any post you create. I finally learned how to be rid of unwanted p tags for good and wanted to share the love…

  1. Navigate to the “umbraco_client\tinymce3” folder under your Umbraco root directory (ie. c:\inetpub\wwwroot\Umbraco\umbraco_client\tinymce3).
  2. Open “tiny_mce_src.js”
  3. Do a search in the file for “forced_root_blockGet rid of pesky p tags in Umbraco's TinyMCE 3 Editor
  4. Remove the p between the two single quotes and just leave forced_root_block : ”, on that line.
  5. Save the file and p tags will stop appearing.
  6. Similarly, if you would like some other tag to appear by force at the top of any content field, you could insert that tag in between the quotes (ie. ‘br’ would insert a break (<br>) before the first line of any content field in Umbraco).

About the Author: Scott McCown

I'm an IT Consultant for Pariveda Solutions, an IT consulting company based out of Dallas, TX (and might I add the best IT consultant company to work for). I enjoy honing my development and management skills so that I can better serve the needs of our customers.

8 Comments + Add Comment

  • great information. In Umbraco 7, the location is /umbraco/lib/tinycme/tinycme.min.js

  • Here’s an alternative solution,

    Wrap the output of the field in a semantic tag () and then add a css rule:

    mce p:first-of-type {
    margin-top:0px;
    }

    mce p:last-of-type {
    margin-bottom:0px;
    }

    For me, this felt less ‘hacky’ and didn’t require me to keep any customised versions of files.

  • There’s a much better way of doing this. Edit the config\tinymceconfig.config file in your umbraco install.

    Towards the bottom is a customConfig element. Add the following:

    • Looks like my code got stripped out. You need to add an element with key of “forced_root_block” with an empty value.

      • That’s a much neater solution Tom! I can confirm that it does indeed work. Thanks very much. 🙂

    • I have had this issue for a while and had to get around it with crappy styling. This worked and is definitely the “correct” way to do it. Thanks!

  • You guys can easly do it using TinyMCE settings.

    1. Go to “tinyMceConfig.config” file under “config” folder.
    2. Search for or go to “” section.
    3. Add new line as:

    This will not generate tag in CMS Editor. So, you can write your content as you like. 🙂 If you want to change it to something else then change it accordingly. For e.g. If you want to use tag then change it to: div

    Thanks,
    Bipin

  • Thanks! It works