Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I create a Quill editor without a toolbar?

Tags:

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)

like image 639
rockerest Avatar asked Sep 12 '16 18:09

rockerest


People also ask

What is quill rich editor?

Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.


2 Answers

A falsy value for toolbar should be correct:

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

Here's a bug report for tracking.

like image 106
jhchen Avatar answered Sep 20 '22 15:09

jhchen


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)

like image 27
Rafał Olszewski Avatar answered Sep 21 '22 15:09

Rafał Olszewski