- 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
Migration to Froala from Aloha
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
Aloha and Froala use a DOM selector to fetch the element that includes the editor. The following example uses a div tag that has its id value set to ‘editor’ to get the containing element.
Aloha WYSIWYG Editor
<script type="text/javascript">
Aloha.ready(function(){
Aloha.jQuery('#editor').aloha();
});
</script>
Froala Editor.
<script>
var editor = new FroalaEditor('#editor');
</script>
Froala Editor can initialize on more elements than other editors:
- You can initiate Froala 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
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.
Aloha WYSIWYG Editor
Aloha.settings = {
plugins:{
format:{
// all elements with no specific configuration get this configuration
config:['b', 'i', 'sub', 'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
editables:{
// no formatting allowed for title
'#title': [],
// just bold and italic for the teaser
'#teaser': ['b', 'i']
}
}
}
}
Froala Editor
new FroalaEditor('#editor', {
pluginsEnabled: ['image', 'link']
});
If you don’t find the plugin you want, you can create your own.
3. Toolbar Customizations
Aloha and Froala Editors allow the customization of the toolbar. In Froala Editor 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.
Aloha toolbar customizations
Aloha.settings.toolbar = {
tabs: [
{
label: 'Format',
components: [
['bold', 'italic', 'underline', '\n', 'subscript', 'superscript', 'strikethrough'],
['formatBlock']
]
},
{
label: 'Insert',
exclusive: true,
components: [
["createTable", "characterPicker", "insertLink"],
['myArena']
]
},
{
label: 'Link',
components: ['editlink']
}
],
exclude:['strong', 'emphasis', 'strikethrough'],
responsiveMode: false
};
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.