Linebreaks in TinyMCE editor show extra line on preview, not in code

Question

I'm using the BBCode plugin with TinyMCE and see that line breaks are not showing the same between the preview and the HTML code.

I have the following lines in the editor window:

This is line one

This is line three

Line two is empty. When I'm viewing this in HTML I get the following.

This is line one
This is line three

Without the extra empty line.

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "bbcode",
    entity_encoding : "raw",
    remove_linebreaks : false,
    force_p_newlines : false,
    force_br_newlines : true,
    forced_root_block : ''
});

What am I missing?

Answer 1

I have tested it on my test page with Firefox 3.5.7 and Google Chrome 4.0.223.11.

html:

tinyMCE.init({
  theme : "advanced",
  mode : "textareas",
  plugins : "bbcode",
  content_css : "bbcode.css",
  entity_encoding : "raw",
  add_unload_trigger : false,
  remove_linebreaks : false,
  apply_source_formatting : false
});

The space between the paragraphs can be removed using a simple CSS ("bbcode.css") like this:

p {margin:0; padding: 0;}

Answer 2

You probably need to use the nl2br() function to output your HTML code:

nl2br — Inserts HTML line breaks before all newlines in a string

Alternatively you could set the force_p_newlines option to true.

---

I've tested it and you're right but the behavior only happens with the BBCode plugin. I believe that by using the preformatted : true option in tinyMCE.init you should be able to solve your problem.