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?

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

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

回答3:

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

回答4:

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

回答5:

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

回答6:

try adding in the config object

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

回答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,

回答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

来源：https://stackoverflow.com/questions/1969335/linebreaks-in-tinymce-editor-show-extra-line-on-preview-not-in-code