Decrease the line spacing in TinyMCE textarea

Decrease the line spacing in TinyMCE textarea

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 by danludwig for Decrease the line spacing in TinyMCE textarea

There is a css class that is applied to the TinyMCE html content. It looks like you have

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 by span for Decrease the line spacing in TinyMCE textarea

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 by Terry Bullock for Decrease the line spacing in TinyMCE textarea

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

forced_root_block : 'div',  

Answer by salah9 for Decrease the line spacing in TinyMCE textarea

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.

Answer by TidharPeer for Decrease the line spacing in TinyMCE textarea

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 by mangatinanda for Decrease the line spacing in TinyMCE textarea

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71