import { Component , SecurityContext } from '@angular/core' ; import { DomSanitizer } from '@angular/platform-browser' ; import { UploadResult , MdEditorOption } from './../../../src/public_api' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent { public options : MdEditorOption = { showPreviewPanel : false , enablePreviewContentClick : false , resizable : true , customRender : { image : function ( href , title , text ) { let out = `<img style="max-width: 100%; border: 20px solid red;" src="${ href }" alt="${ text }"` ; if ( title ) { out += ` title="${ title }"` ; } out += ( < any > this . options ) . xhtml ? "/>" : ">" ; return out ; } } , markedjsOpt : { sanitize : true } } ; public content : string ; public mode : string = 'editor' ; constructor ( private _domSanitizer ) { this . preRender = this . preRender . bind ( this ) ; this . postRender = this . postRender . bind ( this ) ; } ngOnInit ( ) { let contentArr = [ '# Hello, Markdown Editor!' ] ; contentArr . push ( '```javascript ' ) ; contentArr . push ( 'function Test() {' ) ; contentArr . push ( '	console.log("Test");' ) ; contentArr . push ( '}' ) ; contentArr . push ( '```' ) ; contentArr . push ( ' Name | Type' ) ; contentArr . push ( ' ---- | ----' ) ; contentArr . push ( ' A | Test' ) ; contentArr . push ( '![](http://lon-yang.github.io/markdown-editor/favicon.ico)' ) ; contentArr . push ( '' ) ; contentArr . push ( '- [ ] Taks A' ) ; contentArr . push ( '- [x] Taks B' ) ; contentArr . push ( '- test' ) ; contentArr . push ( '' ) ; contentArr . push ( '[Link](https://www.google.com)' ) ; contentArr . push ( `<img src="1" onerror="alert(1)" />` ) ; contentArr . push ( '' ) ; this . content = contentArr . join ( '\r\n' ) ; } togglePreviewPanel ( ) { this . options . showPreviewPanel = ! this . options . showPreviewPanel ; this . options = Object . assign ( { } , this . options ) ; } changeMode ( ) { if ( this . mode === 'editor' ) { this . mode = 'preview' ; } else { this . mode = 'editor' ; } } togglePreviewClick ( ) { this . options . enablePreviewContentClick = ! this . options . enablePreviewContentClick ; this . options = Object . assign ( { } , this . options ) ; } toggleResizeAble ( ) { this . options . resizable = ! this . options . resizable ; this . options = Object . assign ( { } , this . options ) ; } doUpload ( files ) { console . log ( files ) ; return new Promise ( ( resolve , reject ) => { setTimeout ( ( ) => { let result = [ ] ; for ( let file of files ) { result . push ( { name : file . name , url : `https://avatars3.githubusercontent.com/${ file . name }` , isImg : file . type . indexOf ( 'image' ) !== - 1 } ) ; } resolve ( result ) ; } , 3000 ) ; } ) ; } onEditorLoaded ( editor ) { console . log ( `ACE Editor Ins: ` , editor ) ; } preRender ( mdContent ) { console . log ( `preRender fired` ) ; return mdContent ; } postRender ( html ) { console . log ( `postRender fired` ) ; return html ; } onPreviewDomChanged ( dom ) { console . log ( `onPreviewDomChanged fired` ) ; } }