Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Options

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/[email protected]/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/[email protected]/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://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']});
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1213823341" 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_1622049745" 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_2142490687" 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>