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

Logo for the Froala quick and easy methods to adjust the size of your Froala 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.

HTML code section in a web editor, emphasizing coding and design

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
Web browser window with minimum and maximum height settings

 

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
Browser window with a height option slider interface

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

Posted on March 24, 2020

Kirti Joshi

Kirti Joshia former writer for Froala, showcased exceptional talent and dedication during their tenure with the company.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published.

    Hide Show