Quick and Easy Methods to Adjust the Size of Your Froala Editor

Posted on March 24, 2020
By Kirti Joshi
In Editor,

Froala Javascript Editor offers developers the complete flexibility and creativity to adjust the look and feel of the editor to suit their application. In a recent blog post, we discussed how to include multiple Froala Editors on a single webpage. Today, we’ll discuss how to adjust the size of the editors so they can nicely fit on a single webpage.

The ‘Editor Size’parameter allows us to achieve this functionality. Users can tune in to the following:

Min and Max Height
Predefined Height

ADJUST MIN AND MAX HEIGHT

Users can adjust the height of the editors by setting ‘heightMin’ and ‘heightMax’ in JavaScript.
heightMin will prevent the text editor box from being smaller than the value passed.
heightMax will prevent the text editor box from being taller than the value passed.

Step 1:
Include the CSS File under the ‘Resources’ section
https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css
https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js

Step 2:
Apply the HTML code of the editor. If you need to add multiple editors on your webpage, instantiate multiple instances of it in this section.

Step 3:
Add the JS code of the editor by defining the heightMin & heightMax

new FroalaEditor('div#froala-editor', {
  heightMin: 800,
  heightMax: 1000
})

SEE IT IN ACTION

FIDDLE
https://jsfiddle.net/6gs194ad/1/

Final Output with Min and Max Height Set

PREDEFINED HEIGHTS

The ‘height’ parameter allows you to set the specific height of the editor. If the text appears longer inside, the text editor automatically adds in a vertical scrollbar.

Here’s a quick rundown on how to enable this feature.
Follow Steps 1 & 2 as highlighted above.
Step 3: Add the JS code of the editor by defining ‘height’

new FroalaEditor('div#froala-editor', {
   height: 200
 })

SEE IT IN ACTION

FIDDLE
https://jsfiddle.net/e674knz9/

Final Output with Predefined Height set

TRY FROALA EDITOR

Don’t let other editors on the market dictate how you should design your application. Try Froala and unlock the rich editing capabilities of the modern, customizable, and flexible WYSIWYG Editor