Quill text editor is not working

Following the Quill Quickstart guide, I am trying to use the Quill text editor.

Below is the code.

<html>
  <head>
    <title></title>
    <link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
      var quill = new Quill('#editor', {
        theme: 'snow'
      });
    </script>

    <style>
      #editor-container {
        height: 375px;
      }
    </style>
  </head>

  <body>
    <!-- Create the editor container -->
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>
  </body>
</html>

But I am not getting expected output. The output I am getting is this:

Hello World!

Some initial bold text

What am I missing?

Thanks for your help.

Solution

You need to initialize the Quill editor after you have created the container (<div id="editor">).

On a side note, I would suggest checking the developer console before posting the next time you run into problems. It's of invaluable help.

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>
  <style>
  #editor {
    height: 375px;
  }
  </style>
</head>
<body>

  <!-- Create the editor container -->
  <div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
  </div>

  <!-- Initialize Quill editor -->
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
  </script>

</body>
</html>