Simple component of Angular 2/4 with QuillJS (wysiwyg)

example.markdown

Example

View

Content html

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

Content typescript

text: string = ''
onChangeText = (text: string) => this.text = text

wysiwyg.html

<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.scss

wysiwyg {
  #editor {
    height: 375px;
  }
}

wysiwyg.ts

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))
  }
}