Days
Hours
Minutes
Seconds
x
Skip to content
Froala Documentation

Migrating from Froala V4 to Froala V5

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.

Install Version 5

To find information on the different options for installing Froala Editor, refer to the Getting Started guide

Initialization

Version 5 and version 4 both support the same initialization method, just add your new API key, and the editor will continue to function as it did before, but with new features available. The following example shows how to initialize the editor in version 5.
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();

    }
  }
})

Plugins

The following plugins are available when you migrate to version 5:

These plugins are included by default if you are using the froala_editor.pkgd.js file. Otherwise you should include their corresponding stylesheet and JavaScript files.

If you have set the pluginsEnabled option you should add the corresponding plugin identifier.

Sample code:

new FroalaEditor('#froala-editor',  { 
  pluginsEnabled: ['image', 'link', 'exportToWord', 'codeSnippet'],
});

Learn more about how Froala plugins works.

 

API Options

In addition to the new plugins’ configurations, the following API options has been added:

 

V5.0.1

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.

V5.0.0

retainLineBreaksInCellsOnWrap Control how line breaks within a cell are handled when the cell’s content wraps to multiple lines.

 

A complete list of Froala editor options is available on the Options API page.

Why migrate to V5?

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:

  • Enhanced tables.
  • Improved accessibility.
  • Better iOS mobile support.
  • Enhanced copying and pasting from Word.

You can read the complete changelog here.

Additional Resources

Froala V5.0.0

Froala V5.0.0 Release: Code Snippets, Word Imports, and More

Froala V5.0.0 introduces two major features: code snippet insertion with syntax highlighting, and direct Word document import with formatting preserved. This release also includes table handling improvements and updated styling
Read More

Migration support

Get hands-on help migrating your project from our dedicated support team. They are available to assist with any questions or concerns you might have during the transition. Don't hesitate to reach out if you encounter any issues or need guidance on utilizing the new features effectively.

Ready to dive in? Explore our plans