Quill Editor - Add custom button shows "toolbar ignoring attaching to nonexistent format"

user_10132321 0
Viewed 1614

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');
  }
});
javascript
1 Answers

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);
user_61894610
Related