<wysiwyg (onChangeText)="onChangeText($event)"></wysiwyg>
text: string = ''
onChangeText = (text: string) => this.text = text
<div> | |
<div id="toolbar"> | |
<span class="ql-formats"> | |
<select class="ql-size"></select> | |
<button class="ql-bold"></button> | |
<button class="ql-italic"></button> | |
<button class="ql-underline"></button> | |
<button class="ql-strike"></button> | |
<button class="ql-script" value="sub"></button> | |
<button class="ql-script" value="super"></button> | |
<button class="ql-blockquote"></button> | |
<button class="ql-code-block"></button> | |
<button class="ql-list" value="ordered"></button> | |
</span> | |
</div> | |
<div #editor> | |
<p></p> | |
</div> | |
</div> |
wysiwyg { | |
#editor { | |
height: 375px; | |
} | |
} |
import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'; | |
import Quill from "quill" | |
@Component({ | |
selector: 'wysiwyg', | |
templateUrl: 'wysiwyg.html' | |
}) | |
export class WysiwygComponent { | |
@ViewChild('editor') editor: ElementRef; | |
@Output() onChangeText: EventEmitter<any> = new EventEmitter() | |
constructor() { | |
console.log('Hello WysiwygComponent Component') | |
} | |
ngAfterViewInit() { | |
console.log('ionViewDidLoad CrearComentarioPadrePage') | |
this.loadQuill() | |
} | |
loadQuill() { | |
var editor = new Quill(this.editor.nativeElement, { | |
modules: { | |
toolbar: '#toolbar' | |
}, | |
placeholder: 'Escribe un comentario aquí...', | |
theme: 'snow' | |
}) | |
editor.on('text-change', function(delta, oldDelta, source) { | |
if (source == 'api') { | |
console.log("An API call triggered this change.") | |
} else if (source == 'user') { | |
// console.log("A user action triggered this change:", editor.root.innerHTML) | |
this.onChangeText.emit(editor.root.innerHTML) | |
} | |
}.bind(this)) | |
} | |
} |