Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

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.

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_622315014" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_97006237" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1866141948" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>