https://github.com/himasrafeek/quilljs-floating-toolbar
Floating Toolbar for Quilljs Editor
https://github.com/himasrafeek/quilljs-floating-toolbar
editor quill quill-editor quilljs wysiwyg wysiwyg-editor
Last synced: 2 months ago
JSON representation
Floating Toolbar for Quilljs Editor
- Host: GitHub
- URL: https://github.com/himasrafeek/quilljs-floating-toolbar
- Owner: HimasRafeek
- Created: 2024-02-22T18:58:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-23T13:19:30.000Z (over 1 year ago)
- Last Synced: 2024-11-24T19:58:10.236Z (11 months ago)
- Topics: editor, quill, quill-editor, quilljs, wysiwyg, wysiwyg-editor
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Floating Toolbar for Quilljs Editor
This JavaScript plugin adds a floating toolbar to the Quill editor. When text is selected within the Quill editor, a custom floating toolbar appears above the selection, allowing the user to apply formatting options directly. The toolbar is hidden when the selection is cleared or when the selected text does not require formatting changes.
## Features
- Dynamically shows and hides a floating toolbar based on text selection.
- Allows applying formatting options such as bold, italic, underline, strikethrough, and more.
- Supports custom actions like adding links or images via a dialog prompt.
## Prerequisites
Before you begin, ensure you have included jQuery and Quill Editor in your project as this plugin relies on them.
## Installation
To use the floating toolbar, include the provided CSS and JavaScript code in your project. Ensure the HTML structure for the toolbar is present in your document.
### Usage
Implement the floating toolbar functionality by including this JavaScript snippet in your project. Make sure to include it after jQuery and Quill scripts.
```javascript
var quill = new Quill('#editor-container', {
// Quill editor options...
});
var $toolbar = $('#quill-toolbar').floatingToolbar(quill);
$toolbar.on('click', 'button', function () {
// Button action implementation...
});
```
### HTML
You can use any icon, in the Example I have used "remixicon"
```html
```
### CSS
Style the toolbar and buttons using the following CSS. You can customize the appearance according to your project's theme.
```css
--primary: black
#quill-toolbar {
position: absolute;
padding: 5px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
z-index: 1000;
}
#quill-toolbar button {
border: none;
background-color: transparent;
cursor: pointer;
border-radius: 5px;
}
#quill-toolbar button:hover {
color: var(--primary);
}
#quill-toolbar button.active {
background-color: var(--primary);
color: white;
}
```
## Customization
You can customize the toolbar by adding or removing buttons, changing styles, or extending the JavaScript functionality to include more features.
## License
Code copyright 2024 Himas Rafeek. Code released under the MIT license.