Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

add toolbar button 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
}
Comment

PREVIOUS NEXT
Code Example
Javascript :: node get package.json version 
Javascript :: clear element children js 
Javascript :: how to import svg in react 
Javascript :: how to check if the first letter of a string is capitalized or uppercase in js 
Javascript :: nanoid 
Javascript :: js change canvas resolution 
Javascript :: How to send form data from react to express 
Javascript :: javaScript Math.log10() Method 
Javascript :: password page javascript 
Javascript :: jquery countdown timer 
Javascript :: image react native 
Javascript :: cookie options 
Javascript :: initialize function in javascript 
Javascript :: get element in javascript 
Javascript :: debouncing js 
Javascript :: How to get the background image URL of an element using jQuery 
Javascript :: hammer js 
Javascript :: js find all max number indexes in array 
Javascript :: queryselectorall in javascript to get data attribute value 
Javascript :: user icon discord js 
Javascript :: array.from js 
Javascript :: how to redirect to a website in react 
Javascript :: spining load react component 
Javascript :: change the position of div using javascript 
Javascript :: get total width of element including padding and border using jquery 
Javascript :: comparing two arrays in javascript 
Javascript :: append to jquery 
Javascript :: update node js 
Javascript :: import js file 
Javascript :: how to kill all node processes 
ADD CONTENT
Topic
Content
Source link
Name
9+6 =