Quill error: 'quill Invalid Quill container'

Question

I'm using angular 4 and a quill editor. but I get an error of quill Invalid Quill container. I change the name of the container but it still returns the error and cannot identify the container id. I create my quill object in ngOninit but it's not working! these are my codes:

import * as Quill from 'quill';
quill;
this.quill = new Quill('#editor-container', {
    modules: {
        toolbar: { container: '#toolbar-toolbar' }
    },
    theme: 'snow'
});

and this is HTML file:

<md-card>
  <div class="toolbar border-none" id="toolbar-toolbar">
    <span class="ql-formats">
      <select class="ql-size">
        <option value="small"></option>
        <option selected=""></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select class="ql-align">
        <option selected=""></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
    </span>
  </div>
  <hr class="ma-0">
  <div class="border-none capital" id="editor-container" #content>
    <span class="font direct"></span>
  </div>
</md-card>

Try to use ngx-quill which is developed for angular https://github.com/KillerCodeMonkey/ngx-quill — Gregor Doroschenko, Mar 14 '18 at 11:28
@GregorDoroschenko and do you know how can i save the styles like bold, italic and ... in database? i can use them in quill but when i save the text it's not bold or italic anymore — fariba.j, Mar 17 '18 at 05:06
In your html you should use ``
``, because so you can output the formated text content from API/DB. Check this answer: https://stackoverflow.com/questions/34936027/angular-2-how-do-you-render-html-from-a-json-response-without-displaying-the-ta — Gregor Doroschenko, Mar 18 '18 at 09:38

score 13 · Answer 1 · answered Jan 14 '19 at 15:13

13

Unfortunately I am not an Angular expert but I had exactly the same issue with Vue.js. The problem was that Quill was initiated before the DOM container element was properly rendered. If you can make it sure (use a later lifecycle hook or try to initiate the toolbar in the options, not in the markup), it should work.

answered Jan 14 '19 at 15:13

Máté Wiszt

396
2
13

This was it for me, kinda obvious when you think about it. Solved my issue for mentions in React by using useEffect (componentDidMount would work too) – RAC May 20 '22 at 16:25

score 4 · Answer 2 · answered Jun 15 '20 at 14:53

Quill was called before DOM container is rendered. You can delay constructing Quill by using setTimeOut

var editorId = "some-id-name"
setTimeout( () =>
{
    var container = document.getElementById(editorId);
    var editor    = new Quill( container );
}, 3000 );   
// 3000 millisec is maybe too long but too make sure that the problem is from creating 
// Quill before DOM

score 1 · Answer 3 · answered Jan 25 '23 at 12:47

To add to some of the existing answers; using ngAfterViewInit() removed the need for a manual delay in my usecase.

ngAfterViewInit(): void {
  this.quill = new Quill('#editor-container', {
    modules: {
      toolbar: {
        container: '#toolbar-toolbar'
      }
    },
    theme: 'snow'
  });
}

score 0 · Answer 4 · answered Dec 05 '18 at 10:12

0

There other people looking into this, in my case moving the logic to ngOnInit solved the problem. Or just check when trying to initialize quill to have the dom element rendered.

answered Dec 05 '18 at 10:12

Bogdan M.

2,161
6
31
53

Quill error: 'quill Invalid Quill container'

4 Answers4

Linked