src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.ts
selector | app-ngx-editor-toolbar |
styleUrls | ngx-editor-toolbar.component.scss |
templateUrl | ./ngx-editor-toolbar.component.html |
Methods |
Inputs |
Outputs |
constructor()
|
config
|
Type: |
enableToolbar
|
Default value: |
showToolbar
|
Default value: |
execute
|
$event type: EventEmitter<string>
|
canEnableToolbarOptions | ||||||||
canEnableToolbarOptions(value: )
|
||||||||
enable or diable toolbar based on configuration
Parameters :
Returns :
boolean
|
triggerCommand | ||||||||
triggerCommand(command: string)
|
||||||||
triggers command from the toolbar to be executed
Parameters :
Returns :
void
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as Utils from '../common/utils/ngx-editor.utils';
@Component({
selector: 'app-ngx-editor-toolbar',
templateUrl: './ngx-editor-toolbar.component.html',
styleUrls: ['./ngx-editor-toolbar.component.scss']
})
export class NgxEditorToolbarComponent {
@Input() config: any;
@Input() enableToolbar = false;
@Input() showToolbar = true;
@Output() execute: EventEmitter<string> = new EventEmitter<string>();
constructor() { }
/**
* enable or diable toolbar based on configuration
*
* @param value toolbar buttons
*/
canEnableToolbarOptions(value): boolean {
return Utils.canEnableToolbarOptions(value, this.config['toolbar']);
}
/**
* triggers command from the toolbar to be executed
*
* @param command command to be executed
*/
triggerCommand(command: string): void {
this.execute.emit(command);
}
}
<div class="ngx-toolbar" *ngIf="showToolbar">
<div class="ngx-toolbar-set">
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('bold')" (click)="triggerCommand('bold')"
title="Bold" [disabled]="!enableToolbar">
<i class="fa fa-bold" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('italic')" (click)="triggerCommand('italic')"
title="Italic" [disabled]="!enableToolbar">
<i class="fa fa-italic" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('underline')" (click)="triggerCommand('underline')"
title="Underline" [disabled]="!enableToolbar">
<i class="fa fa-underline" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('strikeThrough')" (click)="triggerCommand('strikeThrough')"
title="Strikethrough" [disabled]="!enableToolbar">
<i class="fa fa-strikethrough" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('superscript')" (click)="triggerCommand('superscript')"
title="Superscript" [disabled]="!enableToolbar">
<i class="fa fa-superscript" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('subscript')" (click)="triggerCommand('subscript')"
title="Subscript" [disabled]="!enableToolbar">
<i class="fa fa-subscript" aria-hidden="true"></i>
</button>
</div>
<div class="ngx-toolbar-set">
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyLeft')" (click)="triggerCommand('justifyLeft')"
title="Justify Left" [disabled]="!enableToolbar">
<i class="fa fa-align-left" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyCenter')" (click)="triggerCommand('justifyCenter')"
title="Justify Center" [disabled]="!enableToolbar">
<i class="fa fa-align-center" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyRight')" (click)="triggerCommand('justifyRight')"
title="Justify Right" [disabled]="!enableToolbar">
<i class="fa fa-align-right" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('justifyFull')" (click)="triggerCommand('justifyFull')"
title="Justify" [disabled]="!enableToolbar">
<i class="fa fa-align-justify" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('indent')" (click)="triggerCommand('indent')"
title="Indent" [disabled]="!enableToolbar">
<i class="fa fa-indent" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('outdent')" (click)="triggerCommand('outdent')"
title="Outdent" [disabled]="!enableToolbar">
<i class="fa fa-outdent" aria-hidden="true"></i>
</button>
</div>
<div class="ngx-toolbar-set">
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('cut')" (click)="triggerCommand('cut')" title="Cut"
[disabled]="!enableToolbar">
<i class="fa fa-scissors" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('copy')" (click)="triggerCommand('copy')"
title="Copy" [disabled]="!enableToolbar">
<i class="fa fa-files-o" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('delete')" (click)="triggerCommand('delete')"
title="Delete" [disabled]="!enableToolbar">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeFormat')" (click)="triggerCommand('removeFormat')"
title="Clear Formatting" [disabled]="!enableToolbar">
<i class="fa fa-eraser" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('undo')" (click)="triggerCommand('undo')"
title="Undo" [disabled]="!enableToolbar">
<i class="fa fa-undo" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('redo')" (click)="triggerCommand('redo')"
title="Redo" [disabled]="!enableToolbar">
<i class="fa fa-repeat" aria-hidden="true"></i>
</button>
</div>
<div class="ngx-toolbar-set">
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('paragraph')" (click)="triggerCommand('insertParagraph')"
title="Paragraph" [disabled]="!enableToolbar">
<i class="fa fa-paragraph" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('blockquote')" (click)="triggerCommand('blockquote')"
title="Blockquote" [disabled]="!enableToolbar">
<i class="fa fa-quote-left" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('removeBlockquote')" (click)="triggerCommand('removeBlockquote')"
title="Remove Blockquote" [disabled]="!enableToolbar">
<i class="fa fa-quote-right" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('horizontalLine')" (click)="triggerCommand('insertHorizontalRule')"
title="Horizontal Line" [disabled]="!enableToolbar">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('orderedList')" (click)="triggerCommand('insertUnorderedList')"
title="Unodered List" [disabled]="!enableToolbar">
<i class="fa fa-list-ul" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unorderedList')" (click)="triggerCommand('insertOrderedList')"
title="Ordered List" [disabled]="!enableToolbar">
<i class="fa fa-list-ol" aria-hidden="true"></i>
</button>
</div>
<div class="ngx-toolbar-set">
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('link')" (click)="triggerCommand('link')"
title="Insert/Edit Link" [disabled]="!enableToolbar">
<i class="fa fa-link" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unlink')" (click)="triggerCommand('unlink')"
title="Unlink" [disabled]="!enableToolbar">
<i class="fa fa-chain-broken" aria-hidden="true"></i>
</button>
<button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('image')" (click)="triggerCommand('image')"
title="Insert Image" [disabled]="!enableToolbar">
<i class="fa fa-picture-o" aria-hidden="true"></i>
</button>
</div>
</div>