Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Migrate from Version 2 to Version 3

Initialization

Version 3 removed the jQuery dependency now the editor is easier to initialize. Please find below a code example of initializing the editor in version 3 compared with version 2. For more details installing version 3, please read the Getting Started guide.

You will need an active V3 key to use the V3 editor. Please contact [email protected] for your key or if you have any questions.

// Version 2 example.
// Initialize on an element with class editor.
$('.editor').froalaEditor({
// Pass options.
optionName: 'Option Value',
anotherOption: 'Froala Option',
yetAnotherOne: 100
}).on('froalaEditor.eventName', function (e, editor, param1, param2) {
// Callback code here.
})

// Version 3 example.
new FroalaEditor('.editor', {
// Pass options.
optionName: 'Option Value',
anotherOption: 'Froala Option',
yetAnotherOne: 100,

// Bind events
events: {
eventName: function (param1, param2) {
// Get editor instance.
let editor = this;

// Callback code here.
}
}
})
    

Toolbar Buttons

In version 3, some of the WYSIWYG HTML editor's toolbar button names have changed. The main purpose for this change was improving the UI better.

Old Button New Button
colors -

NEW BUTTONS

The following buttons were newly added: backgroundColor, moreMisc, moreParagraph, moreRich, moreText, textColor.

Plugins

In version 3, following features have been moved to plugins:

Feature New Plugin Name
editInPopup ../js/plugins/edit_in_popup.min.js

Options

In version 3, the following options were changed in order to allow more customization:

Methods

None of the methods from V2 were changed. We exposed more methods and the entire list is available on the Methods API page.

Additionally, methods can be used easier in version 3. Below is an example.

// Initialize editor.
let editor = new FroalaEditor('.selector', {}, function () {
// Call method.
editor.methodName();
});

Events

None of the events from V2 were changed. We exposed more events and the entire list is available on the Events API page.

Additionally, events can be used easier in version 3. Below is an example.

// Initialize editor.
let editor = new FroalaEditor('.selector', {
events: {
eventName: function () {
// Event callback.
console.log(this);
}
}
});

Dynamic Event Binding

Dynamic events can be binded like we used to do in V2.

Below is an example of binding an event dynamically.

// V2 Example.
$('.selector').on('eventName', function (e, editor, $img) {
// Do something here.
});
// unbind an event
$('.selector').off('eventName');


// V3 Example.
let editor = new FroalaEditor('.selector', {
// options
}, function () {
// This can be called only after the editor has been initialized.
editor.events.on('eventName', function(param1, param2) {
// Get editor instance.
let editor = this;

});
// unbind an event
editor.events.off('eventName');
});

New Buttons Structure

Now buttons and button groups can be easily defined in V3.

Additionally it also supports legacy structure. See example below

// V2 Example.
$('.selector').on('eventName', function (e, editor, $img) {
toolbarButtons: ['bold', 'italic', 'underline','|', 'align', 'undo', 'redo', 'html']
});


// V3 Example.
let editor = new FroalaEditor('.selector', {
// defining button groups
toolbarButtons: [['bold', 'italic', 'underline'], ['align', 'undo', 'redo', 'html']]
});

Advanced configuration

// V3 Example.
let editor = new FroalaEditor('.selector', {
// defining button groups
toolbarButtons: {
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
},
'moreParagraph': {
'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
},
'moreRich': {
'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
},
'moreMisc': {
'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
'align': 'right',
'buttonsVisible': 2
}
},

// Change buttons for XS screen.
toolbarButtonsXS: [['undo', 'redo'], ['bold', 'italic', 'underline']]
});
  

Do you think we can improve this article? Let us know.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1485438353" 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_294501452" 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_996478472" 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>