Options

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

1. Running the code

Both Froala and Summernote 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 as textarea or span as the target elements in your page.

Summernote

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

Froala WYSIWYG Editor

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

Froala has the advantage of the ability to be initiated 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 WYSIWYG HTML 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 WYSIWYG HTML 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 HTML WYSIWYG provides its default tools through Plugins, it comes with over 30 plugins for a variety of tools. 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.

Froala WYSIWYG 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 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.

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 WYSIWYG 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 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('#summernote',{
// Add the custom buttons in the toolbarButtons list, after the separator.
toolbarButtons: [['undo','redo','bold'],['HelloButton']]
})