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?

Lyly

What does the raw HTML output look like, and do you get the same result if line 2 has a space in it? – Axe

No, if line 2 contains a space, I get the result i want: <Line1><Empty line><Line2>. But I don't want a space - just an empty line! ;-) – Lyly

I suspect tinymce is outputting <br><br> but some web browsers will only display 2 consecutive linebreaks if there is whitespace between the two HTML tags. Hence my test.. – Axe

..and i was wrong. Problem seems to be that when text is extracted from the textarea (either by posting, or getContent() ) any double newlines are transparently converted to single newlines by the web-browser. Only way i can think of working around that is hacking TinyMCE to always place a space immediately before any newlines. – Axe

@Kordonme: Have you already tried my testpage? – Imperturbation

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;}

Imperturbation

It's the output I want correct, not the preview. See the example link and try what I wrote in my post :-) – Lyly

Ok, here we go: a) open link "flipfish.dk/examples", type something into the editor, press "Submit", got "404 Page not found" b) open link "flipfish.dk/examples", type something into the editor, click on "Test"-Link My solution is for b): the alert-window shows me the empty line. – Imperturbation

Hi Anderas. Just for clarity; I didn't downvote you :-) Second, the solution you provided didn't work. I get a linebreak. But I'm looking for an empty line. – Lyly

@andreas: I tested it and it works, but I think the OP is asking how to preserve the empty lines upon form submission. TinyMCE seems to be making some kind of post-processing there. – Borgeson

@Alix Axel: Let's change the theme to "advanced" -> click on "HTML"-Button -> same result (empty line) – Imperturbation

@andreas: Again, the problem is not within the RTE editor, it's the Javascript post-processing that removes the empty lines, try adding the action attribute to your form and post it to a PHP page, the newline won't be there. – Borgeson

@Alix Axel: submit-button added -> newline is there. – Imperturbation

@andreas: Dude, it's not about the submit button... The form does nothing as it is, try processing it with PHP. – Borgeson

@Alix Axel: The first php keyword is in your comment in your answer. I don't think the OP has a problem with php. You haven't missed my "submitted data"-section on my test-page? – Imperturbation

@Alix Axel: update: result.php added; Still working. I can't see your point... – Imperturbation

@andreas: Seems to be working as it should, let the OP know about that. – Borgeson

@andreas: This workd 100% as expected. How can I mark your answer as correct now? :S – Lyly

@Kordonme: To mark my answer as accepted, click on the check mark beside my answer to toggle it from hollow to green. – Imperturbation

@andreas: There's no green check mark, since the question had a bounty and it autoaccepted the answer with most upvotes. – Lyly

@Kordonme: ... then the bounty expires with no auto-accept, and no answer can ever be accepted for that question. (meta.stackexchange.com/questions/1413) – Imperturbation

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.

Borgeson

No - this isn't in any way the problem I'm describing. First of all, this happens with the built in BBCode previewer, too. And I DO get a linebreak. But I want two, as i typed in the editor: <Line1><Empty line><Line2>. force_p_newlines to true has no effect. I will provide an example. See edit in original post. – Lyly

The preformatted property had no affect, either :( Starting to think this just might be a bug or maybe even by design! – Lyly

@Kordonme: Yeah and it's impossible to reliably undo the effect with PHP. I'm sorry but I can't think of anything else, I've read TinyMCE wiki and some forum posts but no solution comes to my mind... Maybe you should try asking this on the TinyMCE forum? – Borgeson

Yeah, that's what I thought at first. But the support forum had one post with the first line being: "We can not possibly provide support for free for everyone, this forum is closed for posting." – Lyly

@Kordonme: That's sad. They should change that to: "We can not possibly provide support for free for anyone, this forum is closed for posting." Have you considered switching to CKEditor (ckeditor.com)? – Borgeson

Answer 3

From TinyMCE configuration you can choose the beavhior of newlines

http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines

TinyMCE will force BR elements on newlines instead of inserting paragraphs

tinyMCE.init({
    ...
    force_br_newlines : true,
    force_p_newlines : false,
    forced_root_block : '' // Needed for 3.x
});

Sharpshooter

Hi! You almost had me there for a second: remove_redundant_brs. But it didn't work :( It's actually doing something else: wiki.moxiecode.com/index.php/TinyMCE:Configuration/… – Lyly

Answer 4

FYI -- despite the political drama around it being the "right thing to do" to use <p> tags and not use <br> tags, the issue for me was that I was sending content out in emails -- and in emails, I don't have control over CSS on the <p> tags (unless I want to add inline CSS to every tag). So the <p> tags were adding what appeared like double line spacing for end-users. I had added the CSS on my site to remove the spacing and the content looked fine there.

So after using <br> tags, then going to the "right way" with <p>, I'm going back to using <br> tags again...

Eliaeliades

Answer 5

Here's another way of doing this. Just change the behaviour of Enter and Shift+Enter Keys.

ed.onKeyPress.add(
    function (ed, evt) {
            if(evt.shiftKey && evt.keyCode == 13) {
                tinyMCE.execCommand('mceInsertContent', false, '<br><br>');
                tinymce.dom.Event.cancel(evt);
                //alert('shift enter key');
                return;
            } 
            if(evt.keyCode == 13 && !evt.shiftKey) {
                tinyMCE.execCommand('mceInsertContent', false, '<br>');
                tinymce.dom.Event.cancel(evt);
                //alert('enter key');
                return;             
            }                
        });

Stepdaughter

Answer 6

try adding in the config object

valid_elements: 'br'  //and any others that you want

Churchy

Answer 7

I have the same problem. This is a solution for bbcode plugin:

forced_root_block : false,
remove_redundant_brs : false,
valid_elements: "br",
verify_html : false,

Inheritor

Answer 8

with TinyMCE 4 i have the same problem but for me working this config

mode: 'exact',
inline: true, 
add_unload_trigger: false, 
schema:"html5", 
invalid_elements: "span", 
extended_valid_elements : "span[!class]", 
paste_remove_styles: true,
forced_root_block : false, 
verify_html : false,
cleanup : true

Denver