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