Decrease the line spacing in TinyMCE textarea

Question

I am using TinyMCE to provide a rich text editing text editor. But the line spacing between the lines is too much. I have added a screenshot that shows the line spacing I get on pressing an enter. What can be done about it

Answer 1

There is a css class that is applied to the TinyMCE html content. It looks like you have <p> tags causing the spacing. Honestly, it looks pretty good to me. But you can override in the css class:

.tinymce-content p {
    padding: 0;
    margin: 2px 0;
}

See the tinymce docs for more info.

Answer 2

You can add custom css to your CSS-editor like this:

tinyMCE.init({
        ...
        editor_css : "/content_css.css"
});

See docs here: http://www.tinymce.com/wiki.php/Configuration:editor_css

You can then set a line-height property to whatever height you wish in that file.

You can also change a setting where you can switch between generating paragraph tags (p) or linebreak tags (br) with something like this:

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

See the docs here for more info: http://www.tinymce.com/wiki.php/Configuration:force_br_newlines

I think TinyMCE does paragraphs as standard when you hit enter, that is why you get a big margin between your lines. You can also use shift+enter like in Word to get a new line that is a line break instead of paragraph.

Answer 3

You can force TinyMCE to output divs instead of paragraphs. Just put this line in your tinyMCE.init section:

forced_root_block : 'div',

Answer 4

I know, This post is old, but it may help someone.

'force_br_newlines' and 'force_p_newlines' are deprecated as of 3.5.

Use forced_root_blocks instead:

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

Answer 5

From tinyMCE 4.x you can specify this option

forced_root_block_attrs: { "style": "margin: 5px 0;" }

this will append style: margin: 5px 0; for every p tag.

P.S: it will not work for copy/paste content.

Refer: http://archive.tinymce.com/wiki.php/Configuration:forced_root_block_attrs

Answer 6

This is the best solution I've encountered so far... so you may use it:

tinyMCE.init({
    style_formats : [
            {title : 'Line height 20px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '20px'}},
            {title : 'Line height 30px', selector : 'p,div,h1,h2,h3,h4,h5,h6', styles: {lineHeight: '30px'}}
    ]
});

Anyway... that worked for me

Answer 7

If you would like sometimes to have the extra space and sometimes not, then leave TinyMCE as is. And when you want the tighter space between paragraphs instead of pressing enter to go to the next line, press enter and shift together.