How to create a Quill editor without a toolbar?

Question

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

However, whenever I create a new Quill element, I always get a toolbar, even if I don't ask for it. In addition, removing the toolbar causes a JavaScript error that interrupts anything else running on the page.

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>

Run code

Installing modules in an empty object is the same (I believe this is the default):

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>

Run code

Setting the toolbar module to falseor nullresults 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>

Run code

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>

Run code

Here is what I want, but it 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>

Run code

, Quill, DOM node, display: none. , ?

tl; dr: Quill, Quill ?

( : JSFiddle)

Answer 1

:

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

.