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?

What does the raw HTML output look like, and do you get the same result if line 2 has a space in it? — Remy, Jan 14 '10 at 15:16
No, if line 2 contains a space, I get the result i want: . But I don't want a space - just an empty line! ;-) — Kordonme, Jan 20 '10 at 12:33
I suspect tinymce is outputting

but some web browsers will only display 2 consecutive linebreaks if there is whitespace between the two HTML tags. Hence my test.. — Remy, Jan 20 '10 at 23:34
..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. — Remy, Jan 21 '10 at 00:08

andreas · Accepted Answer · 2010-01-20T23:29:39.970

4

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

edited Jan 20 '10 at 23:29

answered Jan 20 '10 at 15:18

andreas

299
3
9

1

It's the output I want correct, not the preview. See the example link and try what I wrote in my post :-) – Kordonme Jan 20 '10 at 15:55
Ok, here we go: a) open link "http://flipfish.dk/examples/", type something into the editor, press "Submit", got "404 Page not found" b) open link "http://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. – andreas Jan 20 '10 at 16:26
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. – Kordonme Jan 20 '10 at 20:48
@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. – Alix Axel Jan 20 '10 at 22:49
@Alix Axel: Let's change the theme to "advanced" -> click on "HTML"-Button -> same result (empty line) – andreas Jan 20 '10 at 23:31
@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. – Alix Axel Jan 20 '10 at 23:43
@Alix Axel: submit-button added -> newline is there. – andreas Jan 20 '10 at 23:46
@andreas: Dude, it's not about the submit button... The form does nothing as it is, **try processing it with PHP**. – Alix Axel Jan 21 '10 at 01:31
@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? – andreas Jan 21 '10 at 06:54
@Alix Axel: update: result.php added; **Still** **working**. I can't see your point... – andreas Jan 21 '10 at 07:03
@andreas: Seems to be working as it should, let the OP know about that. – Alix Axel Jan 21 '10 at 14:35
@andreas: This workd 100% as expected. How can I mark your answer as correct now? :S – Kordonme Jan 25 '10 at 09:51
@Kordonme: To mark my answer as accepted, click on the check mark beside my answer to toggle it from hollow to green. – andreas Jan 26 '10 at 18:04
@andreas: There's no green check mark, since the question had a bounty and it autoaccepted the answer with most upvotes. – Kordonme Jan 27 '10 at 11:00
@Kordonme: ... then the bounty expires with no auto-accept, and no answer can ever be accepted for that question. (http://meta.stackexchange.com/questions/1413) – andreas Jan 27 '10 at 14:03

Alix Axel · Answer 2 · 2010-01-20T17:09:50.780

1

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.

edited Jan 20 '10 at 17:09

answered Jan 14 '10 at 15:21

Alix Axel

151,645
95
393
500

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: . force_p_newlines to true has no effect. I will provide an example. See edit in original post. – Kordonme Jan 20 '10 at 12:42
The preformatted property had no affect, either :( Starting to think this just might be a bug or maybe even by design! – Kordonme Jan 20 '10 at 20:56
@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? – Alix Axel Jan 20 '10 at 21:01
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." – Kordonme Jan 20 '10 at 21:08
@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 (http://ckeditor.com/)? – Alix Axel Jan 20 '10 at 21:19

score 1 · Answer 3 · edited Oct 02 '13 at 15:46

1

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

edited Oct 02 '13 at 15:46

nulll

1,465
1
17
28

answered Jan 20 '10 at 16:40

Dominik Sandjaja

6,326
6
52
77

Hi! You almost had me there for a second: remove_redundant_brs. But it didn't work :( It's actually doing something else: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/remove_redundant_brs – Kordonme Jan 20 '10 at 20:52

score 1 · Answer 4 · answered Jul 08 '10 at 05:48

FYI -- despite the political drama around it being the "right thing to do" to use  tags and not use   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  tags (unless I want to add inline CSS to every tag). So the  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   tags, then going to the "right way" with , I'm going back to using   tags again...

score 1 · Answer 5 · edited Nov 26 '11 at 04:44

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

score 0 · Answer 6 · answered Sep 26 '13 at 06:54

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

score 0 · Answer 7 · edited Mar 13 '11 at 07:45

0

try adding in the config object

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

edited Mar 13 '11 at 07:45

moinudin

134,091
45
190
216

answered Jan 20 '10 at 23:36

Jonathan S.

541
1
3
13

score 0 · Answer 8 · edited Jan 31 '12 at 15:35

0

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,

edited Jan 31 '12 at 15:35

Cosmin

21,216
5
45
60

answered Apr 14 '10 at 15:21

igor

1

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

8 Answers8

Linked