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:
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)
A falsy value for toolbar should be correct:
var config = {
"theme": "snow",
"modules": {
"toolbar": false
}
};
Here's a bug report for tracking.