Quill Editor - 添加自定义按钮显示“工具栏忽略附加到不存在的格式”

Question

I'd like to add a new button to the quill editor toolbar as shown in Codepen and Stackoverflow post

The console shows this warning:

quill.js:5445 quill:toolbar ignoring attaching to nonexistent format omega <button type="button" class="ql-omega">::after

What is missing in the code? How/where would I have to define "omega"?

var toolbarOptions = [
  [{ 'font': [] }],
  ['bold', 'italic', 'underline'],
  ['blockquote', 'code-block'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'align': [] }],
  ['omega']
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

var customButton = document.querySelector('.ql-omega');
customButton.addEventListener('click', function() {
  if (screenfull.enabled) {
    console.log('requesting fullscreen');
    screenfull.request();
  } else {
    console.log('Screenfull not enabled');
  }
});

Answer 1

Add the handler function inside the Quill instance.

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
       container: toolbarOptions,
       handlers: {
        'omega': () => { console.log('omega is clicked'); }
       }
    }
  },
  theme: 'snow'
});

In other way, register the handler function to you quill instance

quill.getModule('toolbar').addHandler('omega', omegaHandlerFunction);