A color picker module used in QuillJS
npm install quill-easy-color
import Quill from 'quill';
import { EasyColorSnowTheme, EasyColorBubbleTheme } from 'quill-easy-color';
import 'quill-easy-color/dist/index.css';
// choose the theme you are using to register
Quill.register(
{
'themes/easy-color-snow-theme': EasyColorSnowTheme,
// 'themes/easy-color-snow-theme': EasyColorBubbleTheme,
},
true
);
const quillBubble = new Quill('#editor-snow', {
theme: 'easy-color-snow-theme',
themeOptions: {
localStorageKey: 'easy-color',
closeAfterChange: false,
customColorChangeDelay: 0,
},
modules: {
toolbar: [
[{ color: [] }, { background: [] }],
],
},
});| attribute | description | type | default |
|---|---|---|---|
| localStorageKey | localStorage key prefix | string | used-color |
| closeAfterChange | snow theme close panel after change color | boolean | true |
| customColorChangeDelay | custom color change debounce delay | number | 300 |
| keepChooseColor | keep choose color | boolean | true |
You can import EasyColorPicker to custom your own color picker
import Quill from 'quill';
import { EasyColorPicker } from './index';
export default class OwnPicker extends EasyColorPicker {
...
}