Как инициализировать редактор Quill в Angular 2 Component?

Question

Я пытаюсь реализовать свой собственный редактор Quill в моем проекте Angular 2. Я использовал npm, чтобы установить quill в свой проект. Я пытаюсь создать приложение счетчика слов с моим компонентом. Я пытаюсь реализовать код с: https://quilljs.com/blog/building-a-custom-module/

HTML-код:

<div id="editor"></div>
<div id="counter">0</div>

CSS:

body {
  padding: 25px;
}

#editor {
  border: 1px solid #ccc;
}

#counter {
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 1px;
  color: #aaa;
  padding: 5px 15px;
  text-align: right;
}

Это мой код компонента:

import { OnInit, Component, ViewChild, ElementRef } from '@angular/core';

import * as Quill from 'quill';

@Component({
  selector: 'app-quill-editor',
  templateUrl: './quill-editor.component.html',
  styleUrls: ['./quill-editor.component.css']
})
export class QuillEditorComponent{
// Implement and register module

  constructor()
  {
          Quill.register('modules/counter', function(quill, options) {
            var container = document.querySelector('#counter');
            quill.on('text-change', function() {
              var text = quill.getText();
              // There are a couple issues with counting words
              // this way but we'll fix these later
              container.innerHTML = text.split(/\s+/).length;
            });
          });

          console.log(document.querySelector('#editor'))

          // We can now initialize Quill with something like this:
          var quill = new Quill('#editor', {
            modules: {
              counter: true
            }
          });
  }
}

Когда я подаю свое заявление, я получаю:

quill Invalid Quill container #editor

Answer 1

Вы можете проверить жизненный цикл Angular и вызвать там свои связанные с Quill вещи, размещение их в constructor() может вызвать ошибку, так как элементы HTML еще не визуализируются.

Вы можете попробовать поместить их в ngOnInit() или ngAfterViewInit()

export class QuillComponent implements OnInit {
    constructor() {
    }

    ngOnInit() { // Quill initialization and querying for elements here }
}

Ссылка: https://angular.io/guide/lifecycle-hooks