Such a useful post thank you! I thought it was worth clarifying for those who are configuring the toolbar with javascript.

1. The name of the class attributor should match the custom toolbar button/dropdown configured. E.g. if you were to configure the toolbar with Javascript you’d use `modules: { toolbar: { container: [ { box: [‘solid’, ;double’, ‘dotted’] } ]}` — this would create toolbar dom elements with ql-box and in this instance the picker always has ql-picker class as well. You can then configure the display text with the ::before pseudo on the dom elements with classes .ql-picker-item and .ql-picker-label along with the data-value attribute… [data-value=’dotted’] etc.
2. In the picker options, it’s useful at have the false option — this will be the selected option when no other class attribute is added

Just small things I knew about while trying to find an article just like this to help me do something that really is simple. The official docs don’t give nice examples like this, especially when you want to restrict a client’s ability to make ugly (and off-brand) customisations to the content.

My final editor options looked like this:

{
  modules: {
    toolbar: {
      container: this.editorToolbar || [
        [{ header: [1, 2, 3, 4, false] }],
        [{ font: ['monda'] }],
        [
          {
            'theme-color': [false, 'primary', 'success']
          }
        ],
        ['bold', 'italic'],
        ['blockquote'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['link'],
        ['clean']
      ]
    }
  },
  theme: 'snow'
}

My attributor config (applied text colour classes as defined by Bulma):

const Parchment = Quill.import('parchment')
const hasTextAttributor = new Parchment.Attributor.Class(
  'theme-color',
  'has-text',
  {
    scope: Parchment.Scope.INLINE,
    whitelist: ['primary', 'success']
  }
)
Quill.register(hasTextAttributor)

and sass:

.ql-picker
  &.ql-font
    .ql-picker-item,
    .ql-picker-label
      &[data-value='monda']::before
        content: 'Monda'
        font-family: 'Monda'
  &.ql-theme-color
    width: 100px
    .ql-picker-item,
    .ql-picker-label
      &::before
        content: 'Default'
        color: inherit
      &[data-value='primary']::before
        content: 'Primary'
        color: $primary
      &[data-value='success']::before
        content: 'Success'
        color: $success

If anyone wanted to know about adding fonts then this is all I left out of the above code:

const Font = Quill.import('formats/font')
Font.whitelist = ['monda']
Quill.register(Font, true)