Unable to set text using Quill.JS setText Textarea

Question

I am using quill rich text editor to generate rich text text area in html. But problem is that i was not able to set any text to rich text using quill setText method. Anyone can advice me whats wrong i am doing here? why setText is not working?

Html:

   <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <div class="form-group">
      <label for="Description">Article:</label>
      <textarea class="form-control" id="Article" rows="6"></textarea>
   </div>

Quill script:

<script>
var quill = new Quill('#Article', {
    theme: 'snow',
    
});
quill.setText('Hello\n');

</script>

Answer 1

As per the official documentation of Quill you do not need to use textArea HTML element.

Just use div and quill will work as a text editor on that.

When textarea is used with Quill it conflict with HTML default behavior and quill.

You can read more about it here and here is what it says.

Note by supplying your own HTML element, Quill searches for particular input elements, but your own inputs that have nothing to do with Quill can still be added and styled and coexist.

var quill = new Quill('#Article', {
  theme: 'snow'
});

quill.setText('Hello World\n');

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div class="form-group">
  <label for="Description">Article:</label>
  <div class="form-control" id="Article" rows="6"></div>
</div>