Search code examples
quill

Quill JS - unsure how to properly set initial toolbar options


My understanding of Quill JS is pretty limited at the moment, and I can't find any documentation on this on the Quill site/github page, so I hope someone may be able to set me straight.

When creating a Quill toolbar, it's possible to set the 'selected' attribute of the toolbar's select elements, and this setting will then be used as the default value when entering a new line.

<select title="Size" class="ql-size">
     <option value="10px">Small</option>
     <option value="13px">Normal</option>
     <option value="18px">Large</option>
     <option value="32px" selected>Huge</option>
  </select>

While this default value will be displayed in the toolbar, the corresponding value is not applied to the line.

Please see the following JS Fiddle

The 'default' font is monospace and size is 'huge'. However, if you type into the editor, this is not applied, unless you re-select these values from the toolbar dropdowns.

Is it expected that you should also apply CSS rules to the editor that match the 'default' values set in the toolbar? (This seems like unnecessary duplication) Or am I looking at this from the wrong direction?


Solution

  • It is expected that you also apply CSS rules to the editor to match the 'default'. When you tell the toolbar that '32px' is the default, you're not saying set text to 32px, you're saying set it to nothing / unset it. Otherwise every single unformatted character would be formatted with a huge list of default formats.