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.init({
  selector: 'textarea'
});

$('textarea').froalaEditor();

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.init({
  selector: 'textarea',
  plugins : 'image link'
});

$('textarea').froalaEditor({
  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

$('textarea').froalaEditor({
  toolbarButtons: [
    'undo', 'redo', '|', 'bold', 'italic', '|', 'insertLink', 'insertImage', '-',
    'alignLeft', 'alignCenter', 'alignRight'
  ]
});