Skip to content

Migrate from Version 3 to Version 4

Install Version 4

There are many ways to install Froala WYSIWYG Editor. Choose the best way for you from our download page.


Initialization

Initialization In version 4 works the same as in version 3-you don’t need to alter your initialization code. Please find below a code example of initializing the editor in version 4.

V3 key is valid to be used with V4, so If your V3 key is active, you don’t need a new active key to use the editor.Please reach out to [email protected] if you have any questions.

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, we have added two new plugins:

Plugin name Description
Markdown Support Format words and phrases in our rich text 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 the 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

Two new options have been added related to the Track changes plugin.

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


A complete list of Froala editor methods available on the Methods API page.

Toolbar Buttons:

New buttons have been added to activate/deactivate the new Markdown and Track Changes features:

  • 'markdown': to switch to Markdown mode
  • 'trackChanges': to enable/disable track changes

When track changes is enabled, a sub-menu with five buttons appears to control track changes actions:

  • Show/Hide changes button
  • Accept all changes button
  • Reject all changes button
  • Accept single change button
  • Reject single change button

If you are customizing the Froala editor toolbar buttons using the toolbarButtons option, make sure to add “trackChanges” and “markdown” to the list to be able to use these features.

Sample code:

new FroalaEditor('#froala-editor',  {
    'toolbarButtons: ['bold', 'italic', 'underline','fontFamily', 'color',  'paragraphStyle','trackChanges','markdown'] 
});



If you are using version 2 and want to migrate to version 4, you should follow the migration from version 2 to version 4 guide.