.github-star {
padding-left: 15px;
margin-bottom: 15px;
}
Toolbar
Toolbar Buttons (Example 3)
Try it yourself:
You have full control over the rich text editor's toolbar functionality. Simply customize what buttons are available, their order in the toolbar and also group them the way you want.
The toolbar's buttons can be customized based on the screen size using the following options:
- toolbarButtons for large devices (≥ 1200px)
- toolbarButtonsMD for medium devices (≥ 992px)
- toolbarButtonsSM for small devices (≥ 768px)
- toolbarButtonsXS for extra small devices (< 768px)
Number of visible buttons and alignment also can be configured. For more advanced toolbar controls, the following structure can be used:
{
// Key represents the more button from the toolbar.
moreText: {
// List of buttons used in the group.
buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
buttonsVisible: 3
},
moreParagraph: {
buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
align: 'left',
buttonsVisible: 3
},
moreRich: {
buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
align: 'left',
buttonsVisible: 3
},
moreMisc: {
buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
align: 'right',
buttonsVisible: 2
}
}
HTML
<div id="froala-editor">
<p>You have full control over the rich text editor's toolbar functionality. Simply customize what buttons are available, their order in the toolbar and also group them the way you want.</p>
</div>
JAVASCRIPT
<script>
new FroalaEditor('div#froala-editor', {
// Set custom buttons.
toolbarButtons: {
// Key represents the more button from the toolbar.
moreText: {
// List of buttons used in the group.
buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
// Alignment of the group in the toolbar.
align: 'left',
// By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
buttonsVisible: 3
},
moreParagraph: {
buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
align: 'left',
buttonsVisible: 3
},
moreRich: {
buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
align: 'left',
buttonsVisible: 3
},
moreMisc: {
buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
align: 'right',
buttonsVisible: 2
}
},
// Change buttons for XS screen.
toolbarButtonsXS: [['undo', 'redo'], ['bold', 'italic', 'underline']]
})
</script>