[SOLVED] How do I create a Quill editor without a toolbar?

How do I create a Quill editor without a toolbar?

I would like to use Quill but not display an editor toolbar (or the "bubble" alternative). I would essentially like a text area with Quill/Parchment backing it.

However, whenever I create a new Quill element, I always get the toolbar, even though I don't ask for it. Additionally, removing the toolbar causes a JavaScript error, which breaks anything else running on the page.

The default:

var config = {
  "theme": "snow"
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

Setting modules to an empty object is the same (I believe this is the default anyway):

var config = {
  "theme": "snow",
  "modules": {}
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

Setting the toolbar module to either false or null results in a JavaScript error:

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": null
  }
};

var quill = new Quill( ".editor", config );

<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

Here's what I want, but this seems like a hacky workaround and I don't like it:

var config = {
  "theme": "snow",
  "modules": {
    "toolbar": ".quill-always-hidden-toolbar"
  }
};

var quill = new Quill( ".editor", config );

.quill-always-hidden-toolbar{
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
}

.quill-always-hidden-toolbar.ql-toolbar.ql-snow + .ql-container.ql-snow{
  border-top: 1px solid #ccc;
}

<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>

<div class="quill-always-hidden-toolbar"></div>
<div class="editor"></div>

It appears there's no way to not have a toolbar on a Quill editor short of rendering it into a DOM node that is always display: none. Is this true, or is there another more graceful way of not rendering the toolbar?

tl;dr: I don't want the Quill Toolbar, how do I create a new Quill instance without the toolbar?

(You can play with these different config options yourself at this JSFiddle)

Solution

A falsy value for toolbar should be correct:

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

Here's a bug report for tracking.