Froala Editor 3 is here!

Migrate from TinyMCE

Options

The following guide explains how to pass different Froala Editor options and highlight what you should do when you migrate from TinyMCE. Where possible, we are doing a side by side comparation so that you can easily spot the differences.


1. Running the code

Both Froala and Tiny are using a DOM selector in order to target the element that the editor would transform into an editable area. In the example below, we are using a textarea tag, though you could use any DOM selector to target elements from your page.

TinyMCE

tinymce.init({
  selector: 'textarea'
});

Froala WYSIWYG Editor

new FroalaEditor('textarea')

2. Working with plugins

Froala WYSIWYG HTML Editor comes with over 30 plugins. Enabling them can be done very handy by specifying the plugins we want to use at the initialization.

Note: By default, all plugins are enabled without using the pluginsEnabled option. Also, each plugin requires you to include the corresponding JS and CSS files. Here is the complete list of plugins and the files required by them.

TinyMCE

tinymce.init({
  selector: 'textarea',
  plugins : 'image link'
});

Froala WYSIWYG Editor

new FroalaEditor('textarea', {
  pluginsEnabled: ['image', 'link']
});


3. Using the toolbar

Froala Editor comes with a lot of room customization when it comes to toolbar. Not only you can choose how you group button together, but you can choose them to adapt based on the screen size so that the editor looks good on all devices. For the complete list of options please see more in Options.

TinyMCE

tinymce.init({
  selector: 'textarea',
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright'
  ]
});

Froala Editor

new FroalaEditor('textarea', {
  toolbarButtons: [
    'undo', 'redo', '|', 'bold', 'italic', '|', 'insertLink', 'insertImage', '-',
    'alignLeft', 'alignCenter', 'alignRight'
  ]
});
Top