Quill: Documentation for exact format options to pass into new Quill()?

[dwangus]

I'm having trouble finding the exact options to pass into a given format to whitelist, when initializing the first Quill() object.

For example, I know that one would pass into the constructor format options like this:

... = new Quill('#editor', { formats: { script: ..., size: ..., list: .... } })

but what exactly are the individual options that can be passed into each format? Like if the option was color, would we pass in a list of colors in hex values or plain English text (like 'red', 'green', 'violet', etc.)?

[benbro]

There are two separate settings, formats and toolbar.

By default all formats are enabled and allowed to exist within a Quill editor and can be configured with the formats option. This is separate from adding a control in the Toolbar.

You can also customize attributes.
CodePen example for adding custom fonts.

[scottfr]

Is there a codepen example for custom fonts and sizes that uses the JavaScript Toolbar constructor (like the OP example is doing)?

The linke CodePen and the others I've found all use HTML markup to define the toolbar. It's not clear how to do custom fonts and sizes using the Javascript form of constructing the toolbar.

[jhchen]

If you did toolbar: [[{font: [false, "mirza", "roboto"]}]] instead of toolbar: "#container" it would functionally work but the labels would all say "Sans Serif". The way to fix this is in CSS also modify the ::before css rule. An example is here: http://codepen.io/quill/pen/MmoVYb

However it should be said that configuration via this Javascript array is not as powerful as HTML, since the latter method can almost an arbitrary input, so there are use cases where it may be better to use the HTML method. In this custom font use case I am of the opinion that

<select class="ql-font">
    <option selected>Aref Ruqaa</option>
    <option value="mirza">Mirza</option>
    <option value="roboto">Roboto</option>
  </select>

is much easier to understand than

#wrapper .ql-picker-label::before,
#wrapper .ql-picker-item::before {
  content: "Aref Ruqaa";
  font-family: "Aref Ruqaa";
}
#wrapper .ql-picker-label[data-value="mirza"]::before,
#wrapper .ql-picker-item[data-value="mirza"]::before {
  content: "Mirza";
  font-family: "Mirza";
}
#wrapper .ql-picker-label[data-value="roboto"]::before,
#wrapper .ql-picker-item[data-value="roboto"]::before {
  content: "Roboto";
  font-family: "Roboto";
}

[scottfr]

Thanks, I'll switch to using the HTML toolbar config.

[quill-bot]

Closing inactive issue.

[ajfarkas]

I think this is still an issue. The documentation is of the "finish drawing the owl" variety.
I haven't been able to remove styling from the whitelist.
For instance, if I want to prevent people from styling text as "bold".

[nhartner]

Nobody knows how to remove styling? I'm trying to prevent the text color from being set and it's maddening hard to figure out how the formats should be used to do this.

[glv1at118]

I am still not clear about how "formats" option should be used in the quill instance. It's obviously not stated clearly at all in the official docs till NOW. https://quilljs.com/docs/formats/
It just listed the options in formats that I can use, but how to set them in the Quill instance?
var quill = new Quill("#editor", {
formats: {
}
});
Do I pass them as key value in object, or in an array, or as strings. Totally not clear :(((((((

[bdotzour]

It is a pretty gross oversight in the documentation to not even show an example of this. I had to spend a while with the interactive playground to figure it out. The short answer is that formats is just an array that whitelists the various strings shown on the Formats page. Example:

var quill = new Quill("#editor", {
formats: ['bold', 'italic', 'underline', 'color']
});

This will preserve those formats when pasting in content, but will strip out others (e.g. link, background, etc).

[econic]

@bdotzour Thanks, you probably saved me some hours of trial and error.

It is horrific for an open source project to not event show any kind of example on how to use this option 🤦‍♂

[Percipient24]

I agree, the docs are sparse in some places.

Is this the place we'd expect to see documentation/examples for the format configuration? https://quilljs.com/docs/configuration/#formats

Or perhaps here?
https://quilljs.com/docs/formats/

If so, someone could open a PR against https://github.com/quilljs/quill/blob/develop/docs/docs/configuration.md / https://github.com/quilljs/quill/blob/develop/docs/docs/formats.md and make some improvements.