CODEWITHSUNDEEP
tinymcebbcoderte
Kordonme
Kordonme

Reputation: 2294

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

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?

Upvotes: 9

Views: 15008

Answers (8)

Dominik Sandjaja
Dominik Sandjaja

Reputation: 6466

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

Upvotes: 1

user2818265
user2818265

Reputation: 26

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

Upvotes: 0

igor
igor

Reputation: 1

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,

Upvotes: 0

Parag Bhavsar
Parag Bhavsar

Reputation: 11

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

Upvotes: 1

Jonathan S.
Jonathan S.

Reputation: 541

try adding in the config object

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

Upvotes: 0

Travis
Travis

Reputation: 497

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

Upvotes: 1

andreas
andreas

Reputation: 289

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

Upvotes: 4

Alix Axel
Alix Axel

Reputation: 154553

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.

Upvotes: 1

Related Questions