How do I create a Quill editor without a toolbar?

Question

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 )

Answer 1

A falsy value for toolbar should be correct:

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

Here's a bug report for tracking.

Answer 2

You can set theme bubble to show medium-like editor instead of always visible version;

var quill = new Quill('#editor', {
  theme: 'bubble'   // Specify theme in configuration
});

Examples (both bubble and snow (default) themes)

Answer 3

You can take two different approaches. The first one is just pass in the options a false value.

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

On the other hand you could also use a prefix theme that comes with no toolbar at all.

var config = {
  "theme": "bubble",
};

All the text editors I used have a prefix theme where there is no toolbar available.