Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple component of Angular 2/4 with QuillJS (wysiwyg)

Example

View

Content html

<wysiwyg (onChangeText)="onChangeText($event)"></wysiwyg>

Content typescript

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))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment