File

src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.ts

Metadata

selector app-ngx-editor-toolbar
styleUrls ngx-editor-toolbar.component.scss
templateUrl ./ngx-editor-toolbar.component.html

Index

Methods
Inputs
Outputs

Constructor

constructor()

Inputs

config

Type: any

enableToolbar

Default value: false

showToolbar

Default value: true

Outputs

execute $event type: EventEmitter<string>

Methods

canEnableToolbarOptions
canEnableToolbarOptions(value: )

enable or diable toolbar based on configuration

Parameters :
Name Type Optional Description
value

toolbar buttons

Returns : boolean
triggerCommand
triggerCommand(command: string)

triggers command from the toolbar to be executed

Parameters :
Name Type Optional Description
command string

command to be executed

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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""