January Savings:  20% Off On All Plans + 3 Months of Platinum Support
Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 is here – Learn More

Pricing
Get Started
Skip to content

Options

blockButtons blockButtons designJavascripts designStylesheets designsDefaultBlocks designsImagesDir designsThumbsDir editorOptions pageCenterButtons pageLeftButtons pageRightButtons showDownloadCounter

designsThumbsDir

Type: String
Default: 
"https://cdn.jsdelivr.net/gh/froala/design-blocks@master/screenshots"

The path from where to load the thumbs for the design blocks.

CODE EXAMPLE

new FroalaPages('selector-id',{designsThumbsDir: "https://cdn.jsdelivr.net/gh/froala/design-blocks@master/screenshots/"});

designsImagesDir

Type: String
Default: 
"https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/imgs"

The path from where to load the images for the design blocks.

CODE EXAMPLE

new FroalaPages('selector-id',{designsImagesDir: "https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/imgs/"});

designsDefaultBlocks

Type: String
Default: 
"Contents"

The default block type to be selected.

CODE EXAMPLE

new FroalaPages('selector-id',{designsDefaultBlocks: "Features"});

designStylesheets

Type: Array
Default: 
[
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
'https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css',
'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i',
'https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css',
'https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_style.min.css'
]

CSS injected in the page editing iframe. By default, we load Bootstrap, Froala Design Blocks and Froala Editor CSS.

CODE EXAMPLE

new FroalaPages('selector-id',{designStylesheets: [
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
'https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css'
]});

designJavascripts

Type: Array
Default: 
[
'https://code.jquery.com/jquery-3.2.1.slim.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js',
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js',
'https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/js/froala_editor.pkgd.min.js',
'https://use.fontawesome.com/releases/v5.5.0/js/all.js'
]

Javascript injected in the page editing iframe.

CODE EXAMPLE

new FroalaPages('selector-id',{designJavascripts: [
'https://cdn.jsdelivr.net/npm/froala-editor@3.0.0/js/froala_editor.pkgd.min.js'
]});

blockButtons

Type: Array
Default: 
['moveUp', 'remove']

The buttons used on a block.

CODE EXAMPLE

new FroalaPages('selector-id',{blockButtons: ['remove']});

pageLeftButtons

Type: Array of Arrays
Default: 
[
['edit', 'layout'],
['desktop', 'tablet_landscape', 'tablet_portrait', 'phone']
]

The buttons used on the left side of the page toolbar.

CODE EXAMPLE

new FroalaPages('selector-id',{pageLeftButtons: [
['edit', 'layout'],
['desktop', 'tablet_landscape', 'phone']
]});

pageCenterButtons

Type: Array
Default: 
['<div style="display: flex;"><span style="margin-top: 5px;">Powered by </span><a href="https://awsstage.froala.com" style="display: inline-block; height: 20px; margin-left: 10px;" title="Froala" target="_blank"><svg style="height: 100%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 822.8 225.8"><defs><style>.cls-1,.cls-2{fill:#0098f7;}.cls-2{stroke:#231f20;stroke-miterlimit:10;stroke-width:5px;}</style></defs><title>froal-no-margin</title><path class="cls-1" d="M123.58,78.65A16.16,16.16,0,0,0,111.13,73H16.6C7.6,73,0,80.78,0,89.94V128.3a16.45,16.45,0,0,0,32.9,0V104.14h78.5A15.63,15.63,0,0,0,126.87,91.2,15.14,15.14,0,0,0,123.58,78.65Z" transform="translate(0 -61.94)"/><path class="cls-1" d="M103.54,170a16.05,16.05,0,0,0-11.44-4.85H15.79A15.81,15.81,0,0,0,0,180.93v88.69a16.88,16.88,0,0,0,5,11.92,16,16,0,0,0,11.35,4.7h.17a16.45,16.45,0,0,0,16.41-16.6v-73.4H92.2A15.61,15.61,0,0,0,107.89,181,15.1,15.1,0,0,0,103.54,170Z" transform="translate(0 -61.94)"/><path class="cls-2" d="M30.4,167.64" transform="translate(0 -61.94)"/><path class="cls-1" d="M233,144.17c-5.29-6.22-16-7.52-24.14-7.52-16.68,0-28.72,7.71-36.5,23.47v-5.67a16.15,16.15,0,1,0-32.3,0v115.5a16.15,16.15,0,1,0,32.3,0v-38.7c0-19.09,3.5-63.5,35.9-63.5a44.73,44.73,0,0,1,5.95.27h.12c12.79,1.2,20.06-2.73,21.6-11.69C236.76,151.48,235.78,147.39,233,144.17Z" transform="translate(0 -61.94)"/><path class="cls-1" d="M371.83,157c-13.93-13.11-32.9-20.33-53.43-20.33S279,143.86,265.12,157c-14.67,13.88-22.42,32.82-22.42,54.77,0,21.68,8,41.28,22.4,55.2,13.92,13.41,32.85,20.8,53.3,20.8s39.44-7.38,53.44-20.79c14.55-13.94,22.56-33.54,22.56-55.21S386.39,170.67,371.83,157Zm-9.73,54.77c0,25.84-18.38,44.6-43.7,44.6s-43.7-18.76-43.7-44.6c0-25.15,18.38-43.4,43.7-43.4S362.1,186.59,362.1,211.74Z" transform="translate(0 -61.94)"/><path class="cls-1" d="M552.7,138.14a16.17,16.17,0,0,0-16,16.3v1C526.41,143.85,509,136.64,490,136.64c-19.83,0-38.19,7.24-51.69,20.4C424,171,416.4,190,416.4,212c0,21.61,7.78,41.16,21.9,55,13.56,13.33,31.92,20.67,51.7,20.67,18.83,0,36.29-7.41,46.7-19.37v1.57a16.15,16.15,0,1,0,32.3,0V154.44A16.32,16.32,0,0,0,552.7,138.14Zm-16.3,73.6c0,30.44-22.81,44.3-44,44.3-24.57,0-43.1-19-43.1-44.3s18.13-43.4,43.1-43.4C513.73,168.34,536.4,183.55,536.4,211.74Z" transform="translate(0 -61.94)"/><path class="cls-1" d="M623.5,61.94a16.17,16.17,0,0,0-16,16.3v191.7a16.15,16.15,0,1,0,32.3,0V78.24A16.32,16.32,0,0,0,623.5,61.94Z" transform="translate(0 -61.94)"/><path class="cls-1" d="M806.5,138.14a16.17,16.17,0,0,0-16,16.3v1c-10.29-11.63-27.74-18.84-46.7-18.84-19.83,0-38.19,7.24-51.69,20.4-14.33,14-21.91,33-21.91,55,0,21.61,7.78,41.16,21.9,55,13.56,13.33,31.92,20.67,51.7,20.67,18.83,0,36.29-7.41,46.7-19.37v1.57a16.15,16.15,0,1,0,32.3,0V154.44A16.32,16.32,0,0,0,806.5,138.14Zm-16.3,73.6c0,30.44-22.81,44.3-44,44.3-24.57,0-43.1-19-43.1-44.3s18.13-43.4,43.1-43.4C767.53,168.34,790.2,183.55,790.2,211.74Z" transform="translate(0 -61.94)"/></svg></a></div>']

The buttons used on the right side of the page toolbar.

CODE EXAMPLE

new FroalaPages('selector-id',{pageCenterButtons: ['Hello!']});

pageRightButtons

Type: Array of Arrays
Default: 
[
['download']
]

The buttons used on the right side of the page toolbar.

CODE EXAMPLE

new FroalaPages('selector-id',{pageRightButtons: []});

showDownloadCounter

Type: Boolean
Default: 
true

Hide or show download counter.

CODE EXAMPLE

new FroalaPages('selector-id',{showDownloadCounter: true});

editorOptions

Type: object
Default: 
{
iconsTemplate: 'font_awesome_5'
}

Froala editor options.

CODE EXAMPLE

new FroalaPages('selector-id',{editorOptions: {iconsTemplate: 'font_awesome_5'}});

blockButtons

Type: Array
Default: 
['moveUp', 'remove']

Block buttons

CODE EXAMPLE

new FroalaPages('selector-id',{blockButtons: ['moveUp', 'remove']});
Sign up

Sign up

Download the code by signing up for our newsletter

Sign up

Download the code by signing up for our newsletter

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. - Froala as described in the Privacy Statement. Froala, Inc. - Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement.
Froala WYSIWYG Editor advertisement with a large blue circle covering a corner of the ad and three bullet points.