Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Styling

Line Height

Using the line_height.min.js plugin it is possible to add custom style on the selected paragraph inside the WYSIWYG HTML editor.

Try it yourself:


You can define your own line heights using the lineHeights option. It is important to have unique keys otherwise they will not work properly.

HTML

<div id="froala-editor">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut erat in lectus cursus ultricies. Quisque lobortis est ut justo finibus lacinia. Vestibulum eget ligula mauris. Duis viverra, nisl eget vestibulum faucibus, nibh nisl commodo ante, nec sollicitudin tellus libero vel massa. Pellentesque risus odio, tincidunt pretium vehicula rhoncus, volutpat ac felis. Maecenas efficitur tristique sem sit amet faucibus. Quisque turpis tortor, gravida in odio vel, vulputate maximus urna. Fusce at metus vel risus ornare pharetra. Ut porta tristique ante nec dapibus. Sed sit amet nisi lorem. Integer pulvinar bibendum leo, ut commodo dui commodo ut. Duis et arcu vel orci suscipit tristique id sed dolor.</p>

  <p>Praesent placerat turpis nibh. Morbi sollicitudin non mi nec molestie. Nunc erat nunc, molestie at ligula nec, luctus dignissim sem. Integer viverra mattis quam, sed hendrerit dui ornare non. Phasellus at enim faucibus, molestie sem ac, malesuada tortor. Proin suscipit metus quis arcu sagittis dictum a ut ex. Sed vel tincidunt purus. Quisque maximus imperdiet magna nec gravida. Vestibulum tristique nulla vestibulum lorem pretium imperdiet. Maecenas venenatis libero nec orci maximus egestas. Quisque est augue, rhoncus in efficitur sed, scelerisque a tellus. Cras dictum sem et auctor maximus. Vivamus consectetur ut libero at condimentum.</p>
</div>

JAVASCRIPT

<script>
  new FroalaEditor('div#froala-editor', {
    lineHeights: {
      Default: '',
      Single: '1',
      '1.15': '1.15',
      '1.5': '1.5',
      Double: '2'
    },
    toolbarButtons: ['lineHeight']
  })
</script>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1673835255" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_368366617" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1567060611" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>