Skip to content

Instantly share code, notes, and snippets.

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



Content html

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

Content typescript

text: string = ''
onChangeText = (text: string) => this.text = text
<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>
<div #editor>
wysiwyg {
#editor {
height: 375px;
import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import Quill from "quill"
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')
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment