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'
  });

[bitbound]

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"
});

[drizztdourden08]

2022 and still the documentation is lacking this. How can it be so hard to admit that the documentation is lacking and update it to properly help your user base.

I've been scouring the internet for a proper answer and just ended up here. And still, some user are adament about the format page but seriously, that doesn't look like anything made for a dev that want to customize the toolbar AT ALL.

Listing in bullet point stuff that is compatible without mentioning that this page list ALL OF THEM is a lack in itself but no example, no documentation on how to use the specific options for any of them at all. Are we suposed to analyze the source code to use Quill? that is stupid.

Let's take JUST ONE. Under the "Block" section in the formats page, it says "- Header - header".

...

What am I even suposed to do with that??? that means literally nothing to a new user. When you look a some example here and there, you see "{'header': '1'}" thrown out there without any further explanation. And they're all like that.

Seriously, get this stuff straight. This is one the Cleanest looking website for documentation, yet one of the most lacking in term of usefulness.

[melnikaite]

I agree that documentation could be much better
Here is tutorial that worth investigating https://medium.com/@mircea.calugaru/react-quill-editor-with-full-toolbar-options-and-custom-buttons-undo-redo-176d79f8d375
It enables all tools, add custom tools and even extend list of fonts

[ryangriggs]

OK I had just dropped Quill into my project and was excited to begin using it, then ran into this issue of toolbar creation, thus leading me to this issue. It is inconceivable that this request for simple documentation has been ignored since 2017. NO, the Formats page is NOT helpful. It states that "by default all formats are enabled" and that "this is separate from adding a control in the Toolbar". The example of allowing text to be bolded without the bold button present seems to indicate that "formats" are ways of rendering user content in editor window, and seems to indicate that this page has nothing to do with toolbars.

It should not be necessary to recreate a toolbar in HTML if all the options already exist in the plugin... just provide an option to enable all toolbar buttons provided by all installed modules, or at the very least, simply require a list of toolbar buttons to show.

At the VERY least, please document the correct process and don't just tell people to read the existing docs, when it was already explained that these pages were not helpful.

Sadly, due to the negligence of this simple request for documentation of a core feature, I'm going to look elsewhere for a WYSIWYG editor.

Best of luck though.

[krk-krk-krk]

You all seem to be forcing Quill authors to improve the documentation.
It seems to me that Quill is not paid software. Remember that the documentation improvements are done with the "good will" of the Quill authors.
I would say that the accompanying complete documentation is obligatory for the product, but for open source it is due to the "good will of the creator".

[ryangriggs]

We're simply saying "if you want people to use (enjoy using) your software, then please provide clear and complete documentation".

[krk-krk-krk]

It seemed to me from this wording of yours that you are forcing the creation of documentation.
At the very least, I think the word "negligence" is incorrect.
Isn't it synonymous with "documentation is an easy task, so don't be lazy and create it?"

Sadly, due to the negligence of this simple request for documentation of a core feature, I'm going to look elsewhere for a WYSIWYG editor.

[ryangriggs]

Negligence = neglecting the request from 2017 for reasonable documentation of important features = a neglected project = not a good choice for new development.

Good documentation is not easy to create, but is absolutely necessary if you want people to enjoy and continue to use your library in new projects. Otherwise, the above conversation is what happens, and the users feel neglected and will look elsewhere.

I'm not attacking anyone nor attempting to force anything. I'm simply saying "the project is only as useful as its documentation", and in this case that documentation is severely lacking.

[terremoth]

2024 and the same happened to me. As most of you, I want a full, standard and default config for full toolbar with all the options, the documentation stills unclear about this, and eventually I fell here in this issue, that nobody seems to care since 2017.

CKEditor 4 made it right back in the past: use their CDN + add to the javascript CKEDITOR.replace("container"); and bingo. Everything was there. No hidden things, no issues, no problems to understand anything. The full toolbar with all the options was there. Unfortunately CKEditor 4 reached his EOL and CKEditor 5 is a mess to configure a full toolbar easily.