- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
- Froala Docs
- /
- Migration Guides
- /
- Tiny
- /
- Options
Migrate from TinyMCE
Options
This section shows how to pass different Froala Editor options and highlights what to do when you migrate from TinyMCE.
1. Running the code
Both Froala and Tiny use a DOM selector as the element that the editor transforms into an editable area. The example below uses a textarea, you can also use any other DOM selector to target elements.
TinyMCE
tinymce.init({
selector: 'textarea'
});
Froala Editor
new FroalaEditor('textarea')
2. Working with plugins
Froala Editor comes with over 30 plugins. You can enable the plugins you want to use at 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 Editor
new FroalaEditor('textarea', {
pluginsEnabled: ['image', 'link']
});
3. Using the toolbar
Froala Editor comes with a highly customizable toolbar. You can choose how to group buttons and also set them to adapt based on the screen size, this allows the editor to display properly on all devices. For a complete list of options please refer to the Options documentation.
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'
]
});
Do you think we can improve this article? Let us know.