- 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
Migrate from Quill to Froala
Options
The following guide explains how to pass different Froala Editor options and highlights what to do when migrating from Quill.
1. Running the code
Both Froala and Quill use a DOM selector to fetch the element that includes the editor. The following example uses a div tag to get the containing element. You can also use DOM elements such astextarea or span as the target elements in your page.
Quill
var quill = new Quill('#editor',{
theme: 'snow'
});
Froala Editor
const editor = new FroalaEditor('#editor');
Froala has the advantage that you can initiate the editor on more elements than Quill.
- 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 on click on an element
<!-- HTML -->
<div id='editor'>Hello Quill</div>
<!-- Javascript -->
<script>
new FroalaEditor('#editor',{
initOnClick: true
});
</script>
2. Working with plugins
Quill uses Modules to customize its behavior and functionality, Forala uses Plugins to do the same. Froala Editor has over 30 plugins, you specify the required plugins 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.
Quill
var quill = new Quill('#editor',{
modules: {
syntax: true, // Include syntax module
toolbar: [['bold', 'italic'], ['link', 'image']],
}
});
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
Similar to Quill, Froala Editor also provides a lot of customization options for the toolbar. It allows you not only to choose how to group buttons, but also to choose them based on the screen resolution, this allows the editor to display properly on all devices. Refer to Options to find a complete list of available options.
Quill toolbar customizations
<script>
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote','code-block'],
[{'header' : 1 }, {['header' : 2}], // custom button values
[{'list' : 'ordered'}, {['list' : 'bullet'}],
[{'script' : 'sub'}, {['script' : 'super'}], // superscript/subscript
[{'indent' : '-1'}, {['indent' : '+1'}], // outdent/indent
[{'direction' : 'rtl'}], // text direction
[{'size' : ['small', 'false', 'large', 'huge'] }], // custom dropdown
[{'header' : [1, 2, 3, 4, 5, 6, 'false'] }],
[{'color' : [] }, { 'background' : [] }], // dropdown with defaults from theme
[{'font' : [] }],
[{'align' : [] }],
['clean'], // remove formatting button
];
var quill = new Quill('#editor',{
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
Froala WYSIWYG Editor
<script>
new FroalaEditor('#editor',{
pluginsEnabled:['image','link','Table'],
toolbarButtons:[
'undo','redo','|','bold','italic','|','insertLink','insertImage','-','alignLeft',
'alignCenter','alignRight'
]}
);
</script>
4. Custom buttons
If you have defined a custom button for your Quill editors, you can do the same in Froala.
Quill
// simple button for inserting text ‘hello’.
<script>
var toolbarOptions = {
handlers: {
// handlers object will be merged with default handlers object
'linked' : function(value){
if(value){
var href = prompt('Enter the URL');
this.quill.format('link', href);
} else {
this.quill.format('link', false);
}
}
}
}
var quill = new Quill(#editor, {
modules: {
toolbar: {
handlers: {
'hello' : function(value){
this.quill.insertText(0, 'Hello', 'bold', true);
},
},
container: [['hello']]
}
},
theme: 'snow'
});
</script>
Froala Editor
// simple button for inserting text ‘hello’.
// Define an icon.
FroalaEditor.DefineIcon('buttonIcon',{name: 'star'})
// Define a button
FroalaEditor.RegisterCommand('HelloButton',{
// Button title.
title:'hello',
// Specify the icon for the button.
// If this option is not specified, the button name will be used.
icon:'buttonIcon',
// Save the button action into undo stack.
undo:true,
// Focus inside the editor before the callback.
focus:true,
// Show the button on mobile or not.
showOnMobile:true,
// Refresh the buttons state after the callback.
refreshAfterCallback:true,
// Called when the button is hit.
callback: function(){
// The current context is the editor instance.
console.log(this.html.get());
this.html.insert('hello');
},
// Called when the button state might have changed.
refresh:function($btn){
// The current context is the editor instance.
console.log(this.selection.element());
}
});
// Add the button to the toolbar.
new FroalaEditor('#editor',{
// Add the custom buttons in the toolbarButtons list, after the separator.
toolbarButtons: [['undo','redo','bold'],['HelloButton']]
})
Do you think we can improve this article? Let us know.