- 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
- Tutorials
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.