import { BehaviorSubject } from 'rxjs/BehaviorSubject' ; import { PlatformService } from './../services/platform.service' ; import { InjectionService } from './../services/injection.service' ; import { AfterViewInit , ChangeDetectionStrategy , Component , EventEmitter , Input , Output , Renderer2 , ViewChild } from '@angular/core' ; import * as Quill from 'quill' ; @ Component ( { selector : 'pm-quill-editor' , templateUrl : './quill-editor.component.html' , styleUrls : [ './quill-editor.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class QuillEditorComponent implements AfterViewInit { @ ViewChild ( 'editor' ) readonly editorContainer : any ; @ Input ( ) readonly content : string ; @ Output ( ) readonly textValue = new BehaviorSubject < string > ( this . content ) ; @ Output ( ) readonly selectionChange = new EventEmitter ( ) ; @ Output ( ) readonly contentUpdated = new EventEmitter ( ) ; private quill : Quill . Quill ; constructor ( injector , renderer , private ps ) { } get serverStyles ( ) { return this . ps . isServer ? 'ql-container ql-snow ql-editor' : '' ; } ngAfterViewInit ( ) { if ( this . ps . isServer ) return ; const _quill = require ( 'quill' ) ; const toolbarOptions = [ [ 'bold' , 'italic' , 'underline' , 'strike' ] , [ 'blockquote' , 'code-block' ] , [ { 'header' : 1 } , { 'header' : 2 } ] , [ { 'list' : 'ordered' } , { 'list' : 'bullet' } ] , [ { 'script' : 'sub' } , { 'script' : 'super' } ] , [ { 'indent' : '-1' } , { 'indent' : '+1' } ] , [ { 'direction' : 'rtl' } ] , [ { 'size' : [ 'small' , false , 'large' , 'huge' ] } ] , [ { 'header' : [ 1 , 2 , 3 , 4 , 5 , 6 , false ] } ] , [ { 'color' : [ ] } , { 'background' : [ ] } ] , [ { 'font' : [ ] } ] , [ { 'align' : [ ] } ] , [ 'code-block' ] , [ 'image' ] , [ 'video' ] , [ 'clean' ] ] ; this . quill = new _quill ( this . editorContainer . nativeElement , { modules : { toolbar : toolbarOptions } , theme : 'snow' } ) ; this . update ( ) ; this . quill . on ( 'text-change' , ( ) => { this . update ( ) ; } ) ; } private update ( ) { this . textValue . next ( this . html ) ; } get html ( ) { return ( this . quill as any ) . container . firstChild . innerHTML ; } }