Setting up line-height via TinyMCE

I have found a good way for adding custom line-height to tinymce but this is a trick. I am using tinymce v5 and with these codes i can use line height with a nice select option.

you have to add these lines to init codes of tiny mce:

 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 at the end i have to say you need to find a "paragraph" word in the file of tinymce/themes/silver/theme.min.js and change it to "line-height" if you want to see the line-height name instead of paragraph name. this word is in line of 290855 of that file. and this job is called custom format in tinymce that if you want to find it check this link: https://www.tiny.cloud/docs/demo/format-custom/ and I have to say you need to add this css codes to 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;
}

Indeed, TinyMCE doesn't have line-height control as it has for font names or font sizes, but you can easily add it with the style_formats. I used this config:

// custom formatting is under Format > formats, so make sure it's in your menu (it is, by default)
const editorOptions = {
  // Notice that it overrides Format > formats
  style_formats: [
      {
          title: 'Line height',
          items: [
            {
              title: 'Default',
              inline: 'span',
              // `inline-block` because CSS `line-height` doesn't affect multiline `span`
              styles: { 'line-height': 'normal', display: 'inline-block' }
            },
            {
              title: '40px',
              inline: 'span',
              styles: { 'line-height': '40px', display: 'inline-block' }
            },
            // add as more as you need
          ]
      },
      // ...
  ]  
}

Working example on codepen

TinyMCE style_formats doc