CODEWITHSUNDEEP
angularfroala
Nemanja G
Nemanja G

Reputation: 1840

How to customize Froala in angular 2?

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

Upvotes: 5

Views: 6223

Answers (3)

Andryxa Piddubnjak
Andryxa Piddubnjak

Reputation: 101

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

Upvotes: 3

Carnaru Valentin
Carnaru Valentin

Reputation: 1846

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.

Upvotes: 4

st3fan
st3fan

Reputation: 1640

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)

Upvotes: 0

Related Questions