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.

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:

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 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:

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