Quill: How to show *all* available buttons by default?

[WhatFreshHellIsThis]

Several examples show a whole bunch of options in the toolbar using the Snow theme by default (13 or more options including font color back and front and image icon etc).

They seem to indicate that there is nothing special to specify to just get all the available options.

When I go to the page source it doesn't seem to show anything in particular for the toolbar, as if there is no need to specify anything to get all options.

I downloaded latest version, included Quill.js and quill.snow.css on my page:

 <div id='editor'>

    </div>
...
<script>
    var quill = new Quill('#editor', {
        theme: 'snow'
    });
</script>

When I do that on my own page (don't specify toolbar options) I only get 8 options, no font color options, no image icon, no alignment icon etc.

I've pored over all the docs, the examples etc, I can't seem to find any place that simply lists all the available options, what those options are and how to specify them, unless the example "toolbaroptions" block on the following page should be taken that way:
http://quilljs.com/docs/modules/toolbar/

If so then maybe it should be documented clearly there as "all available options are listed here" or something to that effect to avoid this confusion.

Should it by default show all options and it's not working as it should or is there some critical documentation I'm missing or...?

Confused.

[benbro]

A list of all available formats and a demo:
http://quilljs.com/docs/formats/

The toolbar page has an example with json:
http://quilljs.com/docs/modules/toolbar/#container

[WhatFreshHellIsThis]

Hmm...I looked at that but it clearly stated "This is separate from adding a control in the Toolbar."
So what you are saying is that those items listed below for format are actually the keys to use to enable the toolbar buttons? If so the docs need to be changed there, it's confusing and not clear at all.

The toolbar page example lists just some of the options, not all of them.

I realize once you are familiar with the control it must all make more sense but I'm posting as a newcomer and it currently doesn't make sense with the docs as they are.

Also you don't just get every option when you specify none which seems from my reading to be contrary to what I understood so that is a disconnect as well for new users.

[00cpxxx]

I agree with this report, I started using quilljs today and it was confusing on how to create the full toolbar. I ended copying the full example toolbar and since I use many different editors in a single page I clone the toolbar and append before the editor in js to reduce size. There could be a shortcut to like:

new Quill('#'+id, {
      modules: {
        toolbar: 'full',
      },
      theme: 'snow'
    });

[jhchen]

Inventing new magical strings is bad practice. The documentation is available and clear in what is going on.

[MariannaAtPlay]

I am experiencing this same problem. I've looked at the documentation very carefully ad it is NOT clear how to easily enable ALL the buttons. @jhchen, are you suggesting that we need to provide an array with the list of all formats to get all the buttons visible like this:

var toolbarOptions = ['bold', 'italic', 'underline', 'strike', 'background', 'color', 'font', 'code',.... + other 20 options???];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  }
});

Please add the code sample that generates the result pictured on this page:
http://quilljs.com/docs/formats/
I don't want to customize anything. I just want the standard buttons.

Also, what's the difference between the toolbar options and formats option?

[barry800414]

I have the same problem with @MariannaAtPlay .
Actually I don't need the function to enable all modules by one keywords, but I want the full list of modules so that I can check how many functions Quill editor can provide.

But after browsing all documentation on quill's website, there is no such list.

[jhchen]

Please see https://quilljs.com/docs/formats/ for a list of supported formats. Please see http://quilljs.com/docs/modules/toolbar/ to see how to use those formats in the form of a button or dropdown.

[fghhfg]

want full toolbar?

my solution, take code from http://quilljs.com/docs/formats/

<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<button class="ql-direction" value="rtl"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<button class="ql-formula"></button>
</span>
<span class="ql-formats">
<button class="ql-clean"></button>
</span>
</div>

  var quill = new Quill('#mdSource', {
    modules: { toolbar: '#toolbar-container' },
    theme: 'snow'
  });

[lucent-sea]

I agree that the documentation for this is unclear.

As a new user looking for information on how to add various toolbar buttons, there's nothing that leads me to think the answer would be within the Formats link.

In my opinion, documentation pertaining to the Toolbar should be under the Toolbar link, even if it repeats information that exists elsewhere. Clearly stating "these are all the available options" would be helpful.

I understand that they're listed under Formats. But that's in no way obvious to a new user. So unless the website exists solely for the benefit of people who are already familiar with the API, I'd suggest adding this information under Toolbar.

[mxl]

We definitely need a list of all available toolbar options.

[gryp17]

I went through the exact same steps as the author:

• Checked the documentation and found nothing.
• Skipped the "formats" page since it states "This is separate from adding a control in the Toolbar".
• Checked their toolbar example page where you can clearly see all toolbar controls were enabled, but when I tried the same code it didn't work!

[1c7]

2018-8-5

The "Format" Section show all option

https://quilljs.com/docs/formats/

For code, click "standalone"

[TymeOfNight]

I mean, thanks, but I still think this is subpar.

This isn't anything like the basic method described on the toolbars page, which uses bracketed lists to indicate options.

Furthermore, it's not immediately obvious when clicking the Standalone link that I need to open my Web Inspector and manually copy the code.

I know I probably sound like a nag, but would it possible to just include a link on the Toolbar page to a text file with all the options, both in the bracketed form and in the html form?

[light-traveller]

I believe the user should not be forced to SEARCH the online documentation and website in order to get what is very basic and what is meant to be the main purpose of any documention. The documentation MUST clearly list all available options and state how they can be enabled/disabled.

What we have here is that we have to first look at the 'Formats', then go to 'Toolbars' module and connect these two information! Why? Please do provide a simple, clear and easy-to-find documentation and do not expect the user to solve puzzles. That is the whole purpose of documenting any library!!!!

[cosmo-101]

2019 and still cannot even start because the hell bartool not shows all options. Run away from this editor. Go with Summernote.

[patchworkfish]

Hi guys - similarity between this thread and "Full toolbar options from Quilljs #295"

Just trialling and so far really impressed and liking Quill, but this is proving a hiccup to what has so far been smooth and simple, and the issue is this missing piece of documentation...

I cannot find a complete definition of setting the tool bar options using JSON, extending the partial example provided in the readme and defining the available options for each format extending the documentation here: https://quilljs.com/docs/formats/.

Defining what controls I want to show with a JSON var seems super simple and great, but for example, if I want to show the align buttons next to each other rather then a drop-down list, I cannot find how to reference the LEFT align button! The below example shows center and right (found by trial and error) but left does not work! :

 var quillToolbarOptions = [
        ...
        [{ 'align': 'left'}, { 'align': 'center'}, {'align': 'right'}],
        ...
];

Please spend a moment adding these details!

_Note:_
_@KillerCodeMonkey has since pointed out the solution to the specific example above by piecing together the JSON format and this info. It is:_

 var quillToolbarOptions = [
        ...
        [{ 'align': ''}, { 'align': 'center'}, {'align': 'right'}],
        ...
];

_See the blank assignment instead of "left"._
A document outlining _all_ the options equivalent to the above would really help!

[mshahzaib101]

here is the solution from official docs
https://drive.google.com/file/d/1A5RiYCY1WhX0-4_grKdtboFKGHB42mBY/view?usp=sharing

[HonbraDev]

Did I get it right?

const editor = new Quill("#editor", {
    modules: {
        toolbar: [
            [{ "font": [] }, { "size": ["small", false, "large", "huge"] }], // custom dropdown

            ["bold", "italic", "underline", "strike"],

            [{ "color": [] }, { "background": [] }],

            [{ "script": "sub" }, { "script": "super" }],

            [{ "header": 1 }, { "header": 2 }, "blockquote", "code-block"],

            [{ "list": "ordered" }, { "list": "bullet" }, { "indent": "-1" }, { "indent": "+1" }],

            [{ "direction": "rtl" }, { "align": [] }],

            ["link", "image", "video", "formula"],

            ["clean"]
        ]
    },
    theme: "snow"
});