Migrating from Froala V4 to V5 is a straightforward process with no breaking changes, ensuring a seamless transition. Users can quickly and easily upgrade, enjoying the same editor they love while benefiting from more powerful features, an enhanced user experience, and improved stability and reliability. This upgrade promises to maintain the familiar interface while delivering significant enhancements.
To find information on the different options for installing Froala Editor, refer to the Getting Started guide
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
// Use editor methods.
editor.method();
}
}
})
The following plugins are available when you migrate to version 5:
Sample code:
new FroalaEditor('#froala-editor', {
pluginsEnabled: ['image', 'link', 'exportToWord', 'codeSnippet'],
}); Learn more about how Froala plugins works.
In addition to the new plugins’ configurations, the following API options has been added:
| fontSizeCustomMin | Defines the minimum font size that can be entered in the Custom Font Size dialog |
| fontSizeCustomMax | Defines the maximum font size that can be entered in the Custom Font Size dialog. |
| importFromWordMammoth | Specifies the Mammoth library instance used to import and convert Microsoft Word (.docx) documents into HTML content. |
| preserveListLineOnBackspace | Prevents Backspace from merging or removing a list item when the cursor is at its start. |
| toolbarButtonsEnabledOnEditorOff | Specify which toolbar buttons should remain active even when the Froala editor is disabled. |
| tableHorizontalResizer | Control table horizontal resizing. |
| tableVerticalResizer | Control table vertical resizing. |
| retainLineBreaksInCellsOnWrap | Control how line breaks within a cell are handled when the cell’s content wraps to multiple lines. |
In addition to the new plugins’ configurations, the following API events has been added:
| drop.afterCleanup | This event is triggered just after the clean process during a drop operation. |
| drop.beforeCleanup | This event is triggered just before the clean process during a drop operation. |
Version 5 offers increased stability and reliability, ensuring a smoother editing experience with fewer disruptions. It also includes a range of new features and bug fixes that enhance functionality and address issues present in previous versions. By upgrading, users can take advantage of these improvements while continuing to enjoy the seamless operation of their favorite editor.
Key improvements:
You can read the complete changelog here.
