How can I make blogger insert <p> tags instead of <br> when using rich text editor?

Question

I don't like how when I'm using the rich text editor in Blogger and I press Enter it inserts a <br > instead of a <p>. Is there any way to get the behavior to change? Or at least is there any way to insert a <p> without switching to the HTML tab?

I'm using Blogger in draft, by the way. I tried both the old editor and the new one; and using Press "Enter" for line breaks instead of Use <br /> tags doesn't help.

I also tried disabling Convert Line breaks, which is described as :

If Yes is selected, single hard-returns entered in the Post Editor will be replaced with single <br /> tags in your blog, and two hard-returns will be replaced with two tags (<br /><br />).

Answer 1

This behavior isn't configurable. Both the current editor, the draft editor and the "old" editor use a combination of BR and DIV tags when they should be using P tags.

It is a mind boggling decision, and it is utterly wrong. It explains a lot of the problems with inconsistent paragraph rendering in Blogger. Perhaps it works in IE, but it doesn't work consistently in webkit browsers like Chrome and Safari.

I think the newest editor inserts two consecutive BR tags, but the older one inserted a single DIV and a single BR.

Microsoft's Windows Live Writer does things correctly as noted above. MarsEdit for OS X is less consistent, I think if it starts with a Blogger authored post it gets tag confusion.

I feel your pain.

Answer 2

I just found out that if you publish your blog post containing p-tags right away instead of switching to the HTML tab first, then the p-tags stays.

Example:

<p>
Here is a body text<br />
that is wrapped in p-tags<br />
</p>

1. Goto HTML view.
2. Enter the code above.
3. Click the Publish button.

If you try to look at the code in the HTML tab, the p-tags will be replaced by div-tags.

Answer 3

One way is to simply use a different rich text editor. I've tried Microsoft's Windows Live Writer which uses <p> instead of <br>.

Answer 4

Well there is no way to configure it with Blogger.

But what I've realized is that this can be done with jQuery.

To do this, you'll need to go to the template area and click “edit HTML”. Do a search for /body. Just above that, insert <script src="http://code.jquery.com/jquery-1.10.1.min.js"> Then insert <script></script>. What you have now, should be this:

some code
<script src='http://code.jquery.com/jquery-1.10.1.min.js'/>
<script>

This is where the jQuery calls will go.

</script>
&lt/body&gt;
some more code

The proper jQuery calls can be figured out from this page in which they give an example asking for almost exactly what you want to do. This example has been copied below (from http://api.jquery.com/contents/)

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <br><br>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  <br><br>
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.
</div>

We can employ the .contents() method to help convert this blob of text into three well-formed paragraphs:

$( ".container" )
  .contents()
    .filter(function() {
      return this.nodeType === 3;
    })
      .wrap( "<p></p>" )
      .end()
    .filter( "br" )
    .remove();

Granted, you'll need to do some slight changes of the above to make it work. But that I will leave for you to figure out. :-)