Skip to content

Migrate from Version 2 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

In version 4 we removed the jQuery dependency and the editor is much easier to initialize. Please find below a code example of initializing the editor in version 4 compared with version 2. For more details installing version 4, please read the Getting Started guide.

You will need an active V4 key to use the V4 editor. Please reach out to [email protected] for your key or if you have any questions.

  // 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, following features have been moved to plugins:

Feature New Plugin Name
editInPopup ../js/plugins/edit_in_popup.min.js

And two new plugins have been introduced:

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

In version 3 & 4, the following options were added in order to allow more customization:


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

Methods

None of the methods from V2 were changed. We exposed more methods and the entire list is available on the Methods API page.

Additionally, methods can be used easier in version 4. Below is an example.

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

Events

None of the events from V2 were changed. We exposed more events and the entire list is available on the Events API page.

Additionally, events can be used easier in version 4. Below is an example.

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

Dynamic Event Binding

Dynamic events can be binded like we used to do in V2. Below is an example of 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 WYSIWYG HTML editor's toolbar button names have changed. The main purpose for this change was improving the UI better.

Old Buttons
colors

New Buttons
  • “backgroundColor”: to add a background color to a text.
  • “textColor”: to change the font color.
  • “moreMisc”: to open the More Misc toolbar.
  • “moreParagraph”: to open the More Paragraph toolbar.
  • “moreRich”: to open the More Rich toolbar.
  • “moreText”: to open the More Text toolbar.
  • “markdown”: to switch to Markdown mode
  • “trackChanges”: to enable/disable track changes

When track changes is enabled, a submenu 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

New Buttons Structure

Now buttons and button groups can be easily defined in V4. Additionally it also supports legacy structure. See example below

 // 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']]
});

Advanced configuration

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']]
}
});