Line height adjustment through TinyMCE

Question

Is there a way to give the user the ability to easily change the line height attribute of a paragraph in tinyMCE? Something like its native "Font Size" or "Format" <select> or something else. I know that I can use the "edit CSS" functionality and configure it there. I am looking for something more comfortable.

I can’t find anything.

Answer 1

According to my comment,

Someone has a problem similar to yours, and a member of the TinyMCE forums provided a solution:

http://www.tinymce.com/forum/viewtopic.php?id=28774

Answer 2

I found this plugin for TinyMCE version 4.1.5 (2014-09-09)

https://github.com/castler/tinymce-line-height-plugin

Set up like this:

 tinymce.init({ plugins: 'lineheight', toolbar: 'lineheightselect' }); 

You can also adjust various heights as follows:

 tinymce.init({ lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt", }); 

I checked this and it works great.

Answer 3

With TinyMCE 4 you can use the "style_formats" option

http://www.tinymce.com/wiki.php/Configuration:style_formats

Answer 4

I found a good way to add custom line height in tinymce, but this is a trick. I am using tinymce v5 and with these codes I can use the line height with a good selection option.

You should add these lines to the tiny mce initialization codes:

  tinymce.init({ selector: 'textarea', height: 500, plugins: 'table wordcount', toolbar: ' styleselect ', content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tiny.cloud/css/codepen.min.css' ], toolbar: 'styleselect' content_style: '.lineheight20px { line-height: 20px; }' + '.lineheight22px { line-height: 22px; }' + '.lineheight24px { line-height: 24px; }' + '.lineheight26px { line-height: 26px; }' + '.lineheight28px { line-height: 28px; }' + '.lineheight30px { line-height: 30px; }' + '.lineheight32px { line-height: 32px; }' + '.lineheight34px { line-height: 34px; }' + '.lineheight36px { line-height: 36px; }' + '.lineheight38px { line-height: 38px; }' + '.lineheight40px { line-height: 40px; }' + '.tablerow1 { background-color: #D3D3D3; }', formats: { lineheight20px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' }, lineheight22px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight22px' }, lineheight24px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight24px' }, lineheight26px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight26px' }, lineheight28px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight20px' }, lineheight30px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight30px' }, lineheight32px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight32px' }, lineheight34px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight34px' }, lineheight36px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight36px' }, lineheight38px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight38px' }, lineheight40px: { selector: 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'lineheight40px' } }, style_formats: [ { title: 'lineheight20px',format: 'lineheight20px' }, { title: 'lineheight22px', format: 'lineheight22px' }, { title: 'lineheight24px', format: 'lineheight24px' }, { title: 'lineheight26px', format: 'lineheight26px' }, { title: 'lineheight28px', format: 'lineheight28px' }, { title: 'lineheight30px', format: 'lineheight30px' }, { title: 'lineheight32px', format: 'lineheight32px' }, { title: 'lineheight34px', format: 'lineheight34px' }, { title: 'lineheight36px', format: 'lineheight36px' }, { title: 'lineheight38px', format: 'lineheight38px' }, { title: 'lineheight40px', format: 'lineheight40px' } ] }); 

and in the end I have to say that you need to find the word “paragraph” in the tinymce / themes / silver / theme.min.js file and change it to “line height” if you want to see the Line height name instead of the paragraph name. this word is on line 290855 of this file. and this work is called custom format in tinymce, and if you want to find it, check this link: https://www.tiny.cloud/docs/demo/format-custom/ and I have to say that you need to add these CSS codes into your CSS file:

 .lineheight22px{ line-height: 22px; } .lineheight24px{ line-height: 24px; } .lineheight26px{ line-height: 26px; } .lineheight28px{ line-height: 28px; } .lineheight30px{ line-height: 30px; } .lineheight32px{ line-height: 32px; } .lineheight34px{ line-height: 34px; } .lineheight36px{ line-height: 36px; } .lineheight38px{ line-height: 38px; } .lineheight40px{ line-height: 40px; }