List of recognized quill toolbar classes

javascript html quill
Tantelope picture Tantelope · Oct 31, 2016 · Viewed 8.1k times · Source

The documentation for the quill module states:

...you can manually create a toolbar in HTML, and pass the DOM element or selector into Quill. The ql-toolbar class will be added to the toolbar container and Quill attach appropriate handlers to and elements with a class name in the form ql-${format}. Buttons element may optionally have a custom value attribute.

The example that follows includes examples such as

<button class="ql-bold"></button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>

Is there a list of all the recognized ql-${format} classes somewhere that I can reference? It would be really helpful to have a table of these in the Toolbar documentation section.

Answer

Ben Browitt picture Ben Browitt · Oct 31, 2016

A list of supported formats.

An example with the HTML of all the toolbar options.

Related questions

How do you insert HTML into a QuillJS?

Is it possible to insert raw HTML into a Quill? I've been searching the documentation but couldn't find anything. If it's not possible, can I at least convert HTML into a Quill Delta? The reason I need this is because …

Read More
How can I add a new format (<hr> tag) to Quill.js?

I want to add a button which would add a <hr> tag to the quill.js (beta) editor. Here the fiddle. <!-- Initialize Quill editor --> <div id="toolbar-container"> <span class="ql-formats"> &…

Read More
How to keep Quill from inserting blank paragraphs (`<p><br></p>`) before headings with a 10px top margin?

Background CSS .ql-editor h3 { margin-top: 10px !important; } HTML source (to be edited with Quill) <div id="editor"> <h1>A Title</h1> <p>hello</p> <h3>A Heading</…

Read More