Options

The following guide explains how to pass different Froala Editor options and highlights what to do when migrating from Quill. There, we have provided the corresponding Froala editor code to the Quill code.

1. Running the code

Both Froala and Quill use a DOM selector to fetch the element that includes the editor. In the below example, we are using 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 WYSIWYG Editor

const editor = new FroalaEditor('#editor');

Froala has the advantage of the ability to be initiated 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 WYSIWYG HTML 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 HTML WYSIWYG Editor has over 30 plugins, we can specify the required plugins at the initialization.

Note: All plugins are enabled by default without using the 'pluginsEnabled' option. Besides, each plugin requires including the corresponding CSS and JS files. Here is a 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 WYSIWYG 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 so that the editor looks fine on all devices. Please 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 easily 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 WYSIWYG 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']]
})