https://github.com/t-vk/dynamicquilltools
DynamicQuillTools is a library that allows you to dynamically add or remove new custom elements to/from a Quill Editor's toolbar. For instance a button or a drop down menu.
https://github.com/t-vk/dynamicquilltools
button custom dropdown dynamic quill quill-editor quilljs toolbar
Last synced: 3 months ago
JSON representation
DynamicQuillTools is a library that allows you to dynamically add or remove new custom elements to/from a Quill Editor's toolbar. For instance a button or a drop down menu.
- Host: GitHub
- URL: https://github.com/t-vk/dynamicquilltools
- Owner: T-vK
- License: bsd-3-clause
- Created: 2019-11-19T20:25:08.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-06T00:39:54.000Z (over 5 years ago)
- Last Synced: 2025-04-11T06:24:48.922Z (6 months ago)
- Topics: button, custom, dropdown, dynamic, quill, quill-editor, quilljs, toolbar
- Language: JavaScript
- Size: 547 KB
- Stars: 51
- Watchers: 1
- Forks: 18
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DynamicQuillTools
DynamicQuillTools is a library that allows you to dynamically add or remove new custom elements to/from a Quill Editor's toolbar. For instance a button or a drop down menu.
## Screenshot
In this screenshot you can see a custom drop down menu and a custom button.
## Live Demo
https://t-vk.github.io/DynamicQuillTools/example.html
## CDN
If you prefer CDNs you can include the library on your website like this:
``` HTML
```
## Examples
For a full example take a look at [example.html](./example.html).
### Very Basic Example
``` JavaScript
const myButton = new QuillToolbarButton({
icon: ` `
})
myButton.onClick = function(quill) {
alert('You just clicked the button!')
}
myButton.attach(quill) // Add the custom button to the quill editor
```
### Adding a Custom Button
``` JavaScript
const myButton = new QuillToolbarButton({
icon: ` `
})
myButton.onClick = function(quill) {
// Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.
// For example, get the selected text and convert it to uppercase:
const { index, length } = quill.selection.savedRange
const selectedText = quill.getText(index, length)
const newText = selectedText.toUpperCase()
quill.deleteText(index, length)
quill.insertText(index, newText)
quill.setSelection(index, newText.length)
}
myButton.attach(quill)
```
### Adding a Custom Drop Down Menu
``` JavaScript
const dropDownItems = {
'Mike Smith': 'mike.smith@gmail.com',
'Jonathan Dyke': 'jonathan.dyke@yahoo.com',
'Max Anderson': 'max.anderson@gmail.com'
}
const myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(quill)
```
## API Documentation
https://t-vk.github.io/DynamicQuillTools/docs