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

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 2

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 3

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

forced_root_block : 'div',