How to customize Froala in angular 2?

Question

I have added the Froala editor in my Angular 2 app and it works, I just cant find how to customize the toolbar, to show buttons that I want (bold, italic, underline, etc), any help?

https://github.com/froala/angular2-froala-wysiwyg

Maybe a look at the documentation will help? https://www.froala.com/wysiwyg-editor/customize — ArrowHead, Jun 13 '17 at 14:51
@ArrowHead I formulated the question wrong, I am interested in how to display only the buttons I want.. Edited the question — Nemanja G, Jun 13 '17 at 14:54
This should help https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons — Slonski, Jun 20 '17 at 21:56

score 4 · Answer 1 · answered Nov 29 '18 at 12:41

You can add option like this:

<div 
    *ngIf="homeIsInEditMode" 
    [froalaEditor]="options" 
    [(ngModel)]="homeMessage.libelleMessage"> 
</div>

And in component add options you want:

public options: Object = {
    placeholderText: 'Edit Your Content Here!',
    charCounterCount: false,
    toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
}

You can get more details in the official documentation.

score 3 · Answer 2 · answered Jul 26 '19 at 13:35

add this

import 'froala-editor/js/plugins/font_size.min.js';
import 'froala-editor/js/plugins/font_family.min.js';
import 'froala-editor/js/plugins/emoticons.min.js';
import 'froala-editor/js/plugins/colors.min.js';

to a module where you want to insert editor

I think it is a very bad implementation, but it work

score 0 · Answer 3 · answered Jul 10 '17 at 07:42

You can find an example here of setting custom options in the Angular Demo. The editor has 4 options for controlling the toolbar, as explained on https://www.froala.com/wysiwyg-editor/examples/toolbar-buttons:

toolbarButtons for large devices (≥ 1200px)

toolbarButtonsMD for medium devices (≥ 992px)

toolbarButtonsSM for small devices (≥ 768px)

toolbarButtonsXS for extra small devices (< 768px)

How to customize Froala in angular 2?

3 Answers3