“Ajouter le bouton de la barre d'outils Quill.js” Réponses codées

Ajouter le bouton de la barre d'outils Quill.js

// 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
}