- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
Migrate from Version 2 to Version 4
Install Version 4
To find information on the different options for installing Froala Editor, refer to the Getting Started guide
Initialization
Version 4 removed the jQuery dependency, now the editor is easier to initialize. You will need an active V4 key to use the V4 editor. Please contact [email protected] for your key or if you have any questions.
Please find below a code example of initializing the editor in version 4 compared with version 2.
// 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 4 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.
}
}
})
Plugins
In version 4, the following features have been moved to plugins:
Feature | New Plugin Name |
editInPopup | ../js/plugins/edit_in_popup.min.js |
And two new plugins have been introduced:
Plugin name | Description |
Markdown Support | Format words and phrases in the editor using code shortcuts through predefined markdown syntax. |
Track Changes | Track changes against new or deleted text within the editor as well as various styling and formatting changes to text, images, and tables. |
These plugins are included by default if you are using the froala_editor.pkgd.js file. Otherwise you should include their corresponding JS file.
If you have set the pluginsEnabled option you should add 'track_changes' to enable the Track Changes plugin and 'markdown' to enable the Markdown plugin.
Sample code:
new FroalaEditor('#froala-editor', {
pluginsEnabled: ['image', 'link', 'track_changes', 'markdown'],
});
API
Options
To allow more customization in version 3 and 4, the following options were added:
A complete list of Froala editor options is available on the Options API page.
Methods
None of the methods from V2 were changed. There are more exposed methods, the entire list is available on the Methods API page.
Additionally, methods are easier to use in version 4. See the example below:
// Initialize editor.
let editor = new FroalaEditor('.selector', {}, function () {
// Call method.
editor.methodName();
});
Events
None of the events from V2 were changed. There are more exposed events, the entire list is available on the Events API page.
Additionally, events are easier to use in version 4. See the example below:
// Initialize editor.
let editor = new FroalaEditor('.selector', {
events: {
eventName: function () {
// Event callback.
console.log(this);
}
}
});
Dynamic Event Binding
You can bind dynamic events like in V2. The example shows binding an event dynamically.
// V2 Example.
$('.selector').on('eventName', function (e, editor, $img) {
// Do something here.
});
// unbind an event
$('.selector').off('eventName');
// V4 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');
});
Toolbar Buttons:
Some of the editor toolbar button names have changed to improve the UI.
Old Buttons |
colors |
New Buttons |
When track changes is enabled, a submenu with five buttons appears to control track changes actions:
|
New Buttons Structure
You can now define buttons and button groups in V4. Additionally it also supports legacy structure. See the example below
// V2 Example.
$('.selector').on('eventName', function (e, editor, $img) {
toolbarButtons: ['bold', 'italic', 'underline','|', 'align', 'undo', 'redo', 'html']
});
// V4 Example.
let editor = new FroalaEditor('.selector', {
// defining button groups
toolbarButtons: [['bold', 'italic', 'underline'], ['align', 'undo', 'redo', 'html']]
});
Advanced configuration
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']]
}
});