Migrate from Version 3 to Version 4

Install Version 4

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

---

Initialization

Initialization In version 4 and version 3 is the same, initialization code does not require changes.

V3 key is valid to be used with V4. If your V3 key is active, you do not need a new active key to use the editor. Please contact [email protected] if you have any questions.

The following example shows how to initialize the editor in version 4.

Copy

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, introduces two new plugins:

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:

Copy

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 is available on the Options API page.

Methods

New methods related to the Track Changes and Markdown plugins have been added.

Track changes:

Markdown

Sample code:

Copy

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, refer to the migration from version 2 to version 4 guide.