- Documentation
- Concepts
- Custom Elements
- Save
- File
- Image
- Video
- Embedly Plugin
- Migration Guides
- From TinyMCE
- From V1
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
$('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
tinymce.init({ selector: 'textarea', plugins : 'image link' });
Froala WYSIWYG Editor
$('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' ] });