Migrate from Version 2 to Version 4

Install Version 4

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

Initialization

Version 4 removed the jQuery dependency, now the editor is easier to initialize. You will need an active V4 key to use the V4 editor. Please contact support@awsstage.froala.com for your key or if you have any questions.

Please find below a code example of initializing the editor in version 4 compared with version 2.

// Version 2 example.
// Initialize on an element with class editor.
$('.editor').froalaEditor ({
  // Pass options.
  optionName:  'Option Value',
  anotherOption: 'Froala Option',
  yetAnotherOne: 100,
}) on('froalaEditor.eventName', function (e, editor, param1, param2) {
  // Callback code here.
})

// Version 4 example.
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, the following features have been moved to plugins:

And two new plugins have been introduced:

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

To allow more customization in version 3 and 4, the following options were added:

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

Methods

None of the methods from V2 were changed. There are more exposed methods, the entire list is available on the Methods API page.

Additionally, methods are easier to use in version 4. See the example below:

// Initialize editor.
let editor = new FroalaEditor('.selector', {}, function () {
  // Call method.
  editor.methodName();
});

Events

None of the events from V2 were changed. There are more exposed events, the entire list is available on the Events API page.

Additionally, events are easier to use in version 4. See the example below:

// Initialize editor.
let editor = new FroalaEditor('.selector', {
  events: {
    eventName: function () {
      // Event callback.
      console.log(this);
    }
  }
});

Dynamic Event Binding

You can bind dynamic events like in V2. The example shows binding an event dynamically.

// V2 Example.
$('.selector').on('eventName', function (e, editor, $img) {
  // Do something here.
});

// unbind an event
$('.selector').off('eventName');

// V4 Example.
let editor = new FroalaEditor( '.selector', {
  // options
}, function () {
  // This can be called only after the editor has been initialized.
  editor.events.on('eventName', function(param1, param2) {
    // Get editor instance.
    let editor = this;
    
    // unbind an event
    editor.events.off('eventName');
  });
});

Toolbar Buttons:

Some of the editor toolbar button names have changed to improve the UI.

// V2 Example.
$('.selector').on('eventName', function (e, editor, $img) {
  toolbarButtons: ['bold', 'italic', 'underline','|', 'align', 'undo', 'redo', 'html']
});

// V4 Example.
let editor = new FroalaEditor('.selector', {
  // defining button groups
  toolbarButtons: [
    ['bold', 'italic', 'underline'],
    ['align', 'undo', 'redo', 'html']
  ]
});

let editor = new FroalaEditor('.selector', {
  // defining button groups
  toolbarButtons: {
    'moreText': {
      'buttons': [
        'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily',
        'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'
      ]
    }
    'moreParagraph': {
      'buttons': [
        'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL',
        'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'
      ]
    }
    'moreRich': {
      'buttons': [
        'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 
        'embedly', 'insertFile', 'insertHR'
      ]
    }
    'moreMisc': {
      'buttons': [
        'undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'
      ],
      'align': 'right',
      'buttonsVisible': 2
    }
  };
  // Change buttons for XS screen.
  toolbarButtonsXS: [
    ['undo', 'redo'],
    ['bold', 'italic', 'underline']
  ]
});