Quill custom buttons and drop-down lists

Adding a button to the toolbar is very simple. Quill has a special dictionary where it stores icons for its interface. To access this dictionary, import:

Now you can get and save any SVG icon. To add your own icon, you need to save its content. To read the content of any file, I created the corresponding readFile function:

After that, you can use it. But how, you ask? Quill uses special names. In order for the icon to be applied, you need to add the appropriate class selector. Specifically, in my example, it will look like this:

To make the button at least somewhat useful, you can attach a special handler to it. This handler has exactly the same name as the button name. This is how this handler is added:

The drop-down list is a bit more complicated, and I'll explain why. The thing is that quill actively relies on CSS selectors, and without proper style settings, you won't get anywhere. Plus, I think you might need a couple of my tricks to make the selectors work correctly.

The HTML code will look like this:

Next, you need to add some styles. You may not have to add them, because this may be a feature of MY site, but if nothing is displayed, add these styles:

Now everything works, but not really. You can notice how the default element does not change. Perhaps somewhere deep in the source code of quill this can be somehow fixed and configured, but I did not find such an opportunity. Therefore, let's setup a handler, just like for the first case with a single button:

It is not necessary to put the ID attribute, but this is the simplest way you can tweak the drop-down list in quill. The value in this case is the value of the attribute of the <option> tag.