// this assumes that you know enough about quill to
// get it operational. You should be able to handle
// this if you know how to set up the original toolbar.
// lets set up a standard toolbar
const editorOptions = {
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike", "clean"],
[{ color: [] }],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
],
["blockquote", "code-block"],
["link"],
// here is your custom button (you just have to name it);
// quill will automatically create a class for this button
// and prepend it with 'ql-' ie. ql-customButton
["customButton"]
],
//this is where you define the action for your button
handlers: {
//name the prop the same as the container's custom name
customButton: () => {
//whatever action you want to perform here
}
// you can write the function directly to the prop
// or point to a reference
// ie. customButton: customButtonHandler
}
}
}
}
// since quill automatically prepends your button name with 'ql-'
// you can make modifications to it & add icons or other content
// with CSS
// if you want do use something like Material Design Icons you could
// import the CDN and use them as content in your CSS
//Import
// <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
// CSS:
.ql-customButton:before {
font-family: "Material Icons";
font-size: 18px;
color: rgb(68 68 68); // this matches the button color for the snow.css theme
content: "draw"; //or any other icon
}