Quill rich text editor - unexplainable toolbar behavior

Question

I am trying to get Quill up and running for an app I am creating. I have been following the docs and examples, but cannot seem to get consistent behavior when attempting to implement a full-featured editor. After working with some examples I found one which would work for some of the features but not others, otoh, I found another which worked for the features which were missing on the first, but not the others (confusing I know, I will explain in more detail below.)

I worked with these two examples, paring them down, and making them as similar as possible to try to pinpoint the differences. When it finally came down to it, the very slight difference in code is inexplicable to me why I get the results I am getting.

In the first example, I am able to generate a toolbar which contains a color palate and a background-color palate. Both work as they should. However, none of the other toolbar items appear, eg, bold, italic, underline, etc.

In the second example, I can generate a toolbar in which all of the expected toolbar items appear. However, the color and background-color select menus appear only in raw form with no styling. Moreover, no text appears for the options, and clicking on an option does nothing.

I am assuming the "snow" theme is responsible for displaying the basic tools.

Here are screenshots, in order as described:

https://postimg.cc/image/ioib9r8qp/

https://postimg.cc/image/4i2kej5ld/

This is the part that is baffling to me. Here is the code for the first file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Quill Test</title>
  <link rel="stylesheet" href="http://cdn.quilljs.com/1.0.0-rc.4/quill.snow.css" rel="stylesheet">
  <script src="http://cdn.quilljs.com/1.0.0-rc.4/quill.js"></script>

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

<div id='toolbar-container'>
  <span class="ql-formats">
    <select class="ql-color" title="Colour">
      <option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
      <option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
      <option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
      <option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
      <option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
    </select>

    <select title="Background Color" class="ql-background" defaultValue="rgb(255, 255, 255)">
      <option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"/>
      <option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"/>
      <option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"/>
      <option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"/>
      <option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"/>
    </select>
  </span>
</div>

<div id="editor-container">
  <p><br></p>
</div>

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

</body>
</html>

The code for the second file is EXACTLY the same, with the only exception, in the script block at the end it is this:

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

  quill.addModule('toolbar', {
    container: '#toolbar-container'     // Selector for toolbar container
  });
</script>

Apparently there is some difference between calling addModule on the quill object, and defining the modules object in the constructor. What doesn't make sense to me however, is in both cases, the "snow" theme is defined in the constructor, yet why in the first case is it not rendered?

KevinHJ KevinHJ · Accepted Answer · 2018-06-22T12:38:05

Okay, I think I've figured it out. First of all, Quill.addModule is not defined in the version of quill I am linking to.

Second of all, apparently, defining modules in the constructor means that I now have to define all the items in the toolbar, in the HTML, assigning each of them to the proper ql- class.

Apparently not defining modules renders a more basic toolbar. I am wondering if there is code that can be defined in the constructor which would generate the additional toolbar items (eg, color palate and background-color palate) without having to explicitly put it all in HTML.

Quill rich text editor - unexplainable toolbar behavior

1 Answers