9

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?

5
  • 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, 2010 at 15:16
  • 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! ;-)
    – Kordonme
    Jan 20, 2010 at 12:33
  • 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..
    – Remy
    Jan 20, 2010 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, 2010 at 0:08
  • @Kordonme: Have you already tried my testpage?
    – andreas
    Jan 21, 2010 at 15:16

8 Answers 8

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;}
15
  • 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, 2010 at 15:55
  • 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.
    – andreas
    Jan 20, 2010 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, 2010 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, 2010 at 22:49
  • @Alix Axel: Let's change the theme to "advanced" -> click on "HTML"-Button -> same result (empty line)
    – andreas
    Jan 20, 2010 at 23:31
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.

5
  • 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.
    – Kordonme
    Jan 20, 2010 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, 2010 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, 2010 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, 2010 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 (ckeditor.com)?
    – Alix Axel
    Jan 20, 2010 at 21:19
1

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...

1

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

try adding in the config object

valid_elements: 'br'  //and any others that you want
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,
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.