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
- Download the free trial
- Take a tour of the features
