import { Component , OnInit } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { DomSanitizer } from '@angular/platform-browser' ; declare var $ ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] , } ) export class AppComponent implements OnInit { showTemplateForm = false ; html : string ; form : FormGroup ; config : any = { airMode : false , tabDisable : true , popover : { table : [ [ 'add' , [ 'addRowDown' , 'addRowUp' , 'addColLeft' , 'addColRight' ] ] , [ 'delete' , [ 'deleteRow' , 'deleteCol' , 'deleteTable' ] ] , ] , image : [ [ 'image' , [ 'resizeFull' , 'resizeHalf' , 'resizeQuarter' , 'resizeNone' ] ] , [ 'float' , [ 'floatLeft' , 'floatRight' , 'floatNone' ] ] , [ 'remove' , [ 'removeMedia' ] ] , ] , link : [ [ 'link' , [ 'linkDialogShow' , 'unlink' ] ] ] , air : [ [ 'font' , [ 'bold' , 'italic' , 'underline' , 'strikethrough' , 'superscript' , 'subscript' , 'clear' , ] , ] , ] , } , height : '200px' , uploadImagePath : '/api/upload' , toolbar : [ [ 'misc' , [ 'codeview' , 'undo' , 'redo' , 'codeBlock' ] ] , [ 'font' , [ 'bold' , 'italic' , 'underline' , 'strikethrough' , 'superscript' , 'subscript' , 'clear' , ] , ] , [ 'fontsize' , [ 'fontname' , 'fontsize' , 'color' ] ] , [ 'para' , [ 'style0' , 'ul' , 'ol' , 'paragraph' , 'height' ] ] , [ 'insert' , [ 'table' , 'picture' , 'link' , 'video' , 'hr' ] ] , [ 'customButtons' , [ 'testBtn' ] ] , ] , buttons : { testBtn : customButton , } , codeviewFilter : true , codeviewFilterRegex : /<\/*(?:applet|b(?:ase|gsound|link)|embed|frame(?:set)?|ilayer|l(?:ayer|ink)|meta|object|s(?:cript|tyle)|t(?:itle|extarea)|xml|.*onmouseover)[^>]*?>/gi , codeviewIframeFilter : true , } ; editorDisabled = false ; get sanitizedHtml ( ) { return this . sanitizer . bypassSecurityTrustHtml ( this . form . get ( 'html' ) . value ) ; } constructor ( private sanitizer ) { this . form = new FormGroup ( { html : new FormControl ( '' , Validators . required ) , } ) ; } ngOnInit ( ) { } enableEditor ( ) { this . editorDisabled = false ; } disableEditor ( ) { this . editorDisabled = true ; } onBlur ( ) { console . log ( 'Blur' ) ; } onDelete ( file ) { console . log ( 'Delete file' , file . url ) ; } summernoteInit ( event ) { console . log ( event ) ; } } function customButton ( context ) { const ui = $ . summernote . ui ; const button = ui . button ( { contents : '<i class="note-icon-magic"></i> Hello' , tooltip : 'Custom button' , container : '.note-editor' , className : 'note-btn' , click : function ( ) { context . invoke ( 'editor.insertText' , 'Hello from test btn!!!' ) ; } , } ) ; return button . render ( ) ; }