Initialization

In version 3 & 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 3 compared with version 2. For more details installing version 3, please read the Getting Started guide.

You will need an active V3 key to use the V3 & 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 3 & 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.
    }
  }
})
          

Toolbar Buttons

In version 3 & 4, some of the WYSIWYG HTML editor's toolbar button names have changed. The main purpose for this change was improving the UI better.

NEW BUTTONS

The following buttons were newly added: backgroundColor, moreMisc, moreParagraph, moreRich, moreText, textColor.

Plugins

In version 3 & 4, following features have been moved to plugins:

Options

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

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 3. 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 3. 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');


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

New Buttons Structure

Now buttons and button groups can be easily defined in V3.

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


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

Advanced configuration

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