How do I create a Quill editor without a toolbar?
<p>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.</p>

<p>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.</p>

<p>The default:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var config = {
  "theme": "snow"
};

var quill = new Quill( ".editor", config );</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.quilljs.com/1.0.3/quill.js"&gt;&lt;/script&gt;
&lt;link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/&gt;

&lt;div class="editor"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var config = {
  "theme": "snow",
  "modules": {}
};

var quill = new Quill( ".editor", config );</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.quilljs.com/1.0.3/quill.js"&gt;&lt;/script&gt;
&lt;link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/&gt;

&lt;div class="editor"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Setting the toolbar module to either <code>false</code> or <code>null</code> results in a JavaScript error:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

var quill = new Quill( ".editor", config );</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.quilljs.com/1.0.3/quill.js"&gt;&lt;/script&gt;
&lt;link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/&gt;

&lt;div class="editor"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var config = {
  "theme": "snow",
  "modules": {
      "toolbar": null
  }
};

var quill = new Quill( ".editor", config );</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.quilljs.com/1.0.3/quill.js"&gt;&lt;/script&gt;
&lt;link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/&gt;

&lt;div class="editor"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var config = {
  "theme": "snow",
  "modules": {
    "toolbar": ".quill-always-hidden-toolbar"
  }
};

var quill = new Quill( ".editor", config );</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/&gt;
&lt;script src="https://cdn.quilljs.com/1.0.3/quill.js"&gt;&lt;/script&gt;

&lt;div class="quill-always-hidden-toolbar"&gt;&lt;/div&gt;
&lt;div class="editor"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

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

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

<p>(You can play with these different config options yourself at <a href="https://jsfiddle.net/rockerest/8t9vuxL1/" rel="noreferrer">this JSFiddle</a>)</p>