QuillJS Color Picker

A color picker module used in QuillJS

Demo

Install

npm install quill-easy-color

Usage

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: [] }],
    ],
  },
});

Options

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

Custom

You can import EasyColorPicker to custom your own color picker

import Quill from 'quill';
import { EasyColorPicker } from './index';

export default class OwnPicker extends EasyColorPicker {
    ...
}