- 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
- /
- Trix
- /
- Options
Migration to Froala
Options
The following guide explains how to pass different Froala Editor options and highlights what to do when migrating from other WYSIWYG editors.
1. Running the code
Trix only loads on “trix-editor” elements, Froala uses a DOM selector to fetch the element that includes the editor. In the below example, we are using a div tag that has its id value set to ‘editor’ to get the containing element.
Froala Editor.
<script>
var editor = new FroalaEditor('#editor');
</script>
Froala Editor can initialize on more elements than other editors:
- Froala can be initiated on an image using the image.min.js plugin
<!-- HTML -->
<img id="edit" src=https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg" alt="Old Clock" width="300"/>
<!-- Javascript -->
<script>
new FroalaEditor('#img#edit');
</script>
- It is possible to initialize the Froala Editor only on a button
<!-- HTML -->
<button id="edit" class="btn r-btn highlight text-small">Button</button>
<!-- Javascript -->
<script>
new FroalaEditor('button#edit');
</script>
- It is possible to initialize the Froala Editor on click on an element
<!-- HTML -->
<div id="editor">Hello ContentTools</div>
<!-- Javascript -->
<script>
new FroalaEditor('#editor',{
initOnClick: true
});
</script>
2. Working with plugins
Trix does not use plugins. Froala Editor has over 30 plugins, you can specify required plugins 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.
Froala Editor
new FroalaEditor('#editor', {
pluginsEnabled: ['image', 'link']
});
If you do not find the plugin you want, you can create your own.
3. Toolbar Customizations
Froala, allows you to choose how to group buttons and choose them based on the screen resolution to properly display the editor on all devices. Please refer to Options to find a complete list of available options.
Froala Editor
<script>
new FroalaEditor('#editor',{
pluginsEnabled:['image','link','Table'],
toolbarButtons:[
'undo','redo','|','bold','italic','|','insertLink','insertImage','-','alignLeft',
'alignCenter','alignRight'
]}
);
</script>
Do you think we can improve this article? Let us know.