Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Migrate from Summernote to Froala

Options

This section shows how to pass different Froala Editor options and highlights what to do when you migrate from Summernote.


1. Running the code

Both Froala and Summernote use a DOM selector as the element that the editor transforms into an editable area. The example below uses a textarea, you can also use any other DOM selector to target elements.

Summernote

    const editor = $('#summernote').summernote();
    

Froala Editor

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

Froala has the advantage of being capable of initializing on more elements than Summernote.

  • 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='summernote'>Hello Summernote</div>
    <!-- Javascript  -->
    <script>
        new FroalaEditor('#summernote',{
        initOnClick: true
        });
    </script>
    

2. Working with plugins

Unlike Summernote, Froala Editor provides its default tools through Plugins, it comes with over 30 plugins you can enable 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('#editorjs', {
       pluginsEnabled: ['image', 'link']
    });

Summernote enables using modules and plugins to extend its functionality, and these both can be replaced with Froala custom plugins.


3. Toolbar Customizations

Similar to Summernote, Froala Editor comes with a highly customizable toolbar. 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.

Summernote toolbar customizations

    <script>
        $('#summernote').summernote({
        toolbar: [
                ['style', ['style']],
                ['font', ['bold','underline','clear']],
                ['color', ['color']],
                ['para', ['ul','ol','paragraph']],
                ['table', ['table']],
                ['insert', ['link','picture','video']],
                ['view', ['fullscreen','codeview','help']]
            ]
        });
    </script>
    

Froala Editor

    <script>
        new FroalaEditor('#summernote',{
            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 Summernote editors, you can easily do the same in Froala.

Summernote

    // simple button for inserting text ‘hello’. 
        var HelloButton = function(context){
           var ui = $.summernote.ui;
           // screate button
           var button = ui.button({
           contents:
           tooltip:'hello',
           click: function(){
           // invoke insertText method with 'hello' on editor module. 
           context.invoke('editor.insertText','hello');
            } 
           });
           return button.render();    // return button as jquery object 
        }
        // Add the button to the toolbar. 
        $('.summernote').summernote({
            toolbar: [
                ['mybutton',['hello']]
            ],
            buttons:{
                hello: HelloButton
            }
        });
    

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('#summernote',{
    // 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_1144319534" 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_562772417" 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_2099605832" 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>