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

Aurore

Maybe a look at the documentation will help? froala.com/wysiwyg-editor/customize – Degraw

@Degraw I formulated the question wrong, I am interested in how to display only the buttons I want.. Edited the question – Aurore

This should help froala.com/wysiwyg-editor/docs/options#toolbarButtons – Detraction

Answer 1

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.

Zug

Answer 2

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

Saltigrade

Answer 3

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)

Solve