Quill js color textbox

Question

I would like to add a textbox for hex/rgb/rgba values in Quill's color options dropbox, so that my users can enter the color value they like, without being limited to the palette offered initially by Quill.js

I tried to use Spectrum ( https://bgrins.github.io/spectrum/ ) in combination with Quill but I failed hard, I could not set/get color values.

RyanDay · Accepted Answer · 2019-05-10T17:36:50.663

At a bare minimum you can add an option for a "custom-color" in the toolbar, then customize the handler to check if "custom-color" was selected. From there you can do whatever you like. In the example below, I just show a prompt window to get the value.

// Add a 'custom-color' option to the the color tool
var tools = [
 ['bold', 'italic', 'underline', 'strike'],
  [{'color': ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466", 'custom-color']}]
];


var quillEditor = new Quill('#editor-container', {
 modules: {
   toolbar: tools
  },
  theme: 'snow'
});

// customize the color tool handler
quillEditor.getModule('toolbar').addHandler('color', (value) => {

    // if the user clicked the custom-color option, show a prompt window to get the color
    if (value == 'custom-color') {
        value = prompt('Enter Hex/RGB/RGBA');
    }

    quillEditor.format('color', value);
});

.ql-color .ql-picker-options [data-value=custom-color] {
  background: none !important;
  width: 100% !important;
  height: 20px !important;
  text-align: center;
}
.ql-color .ql-picker-options [data-value=custom-color]:before {
  content: 'Custom Color';
}
.ql-color .ql-picker-options [data-value=custom-color]:hover {
  border-color: transparent !important;
}

<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<div id="editor-container"></div>

Thanks for sharing! Developers note that `color` has "`custom-color`" at the end of the color list. — Vael Victus, Jan 18 '19 at 22:46
It doesn't change the color of the line under the `A` , in the toolbar. It should be the color of the current selection. — user3928561, Nov 12 '20 at 04:14

Hardik Mandankaa · Answer 2 · 2020-03-04T12:45:55.917

For React_Quill Custom Color Code Textbox (react-quill npm)

import ReactQuill, { Quill } from 'react-quill';
import quillEmoji from 'quill-emoji';
import 'react-quill/dist/quill.snow.css';
const { EmojiBlot, ShortNameEmoji, ToolbarEmoji, TextAreaEmoji } = quillEmoji;

Quill.register({
  'formats/emoji': EmojiBlot,
  'modules/emoji-shortname': ShortNameEmoji,
  'modules/emoji-toolbar': ToolbarEmoji,
  'modules/emoji-textarea': TextAreaEmoji
}, true);

const modulesQuill = {
  toolbar: {
    container: [
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['bold', 'italic', 'underline'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'color': ['#000000', '#e60000', '#ff9900', '#ffff00', '#008a00', '#0066cc', '#9933ff', '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff', '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff', '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2', '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466', 'custom-color'] }, { 'background': [] }, 'link', 'emoji'],
    ],
    handlers: {
      'color': function (value) {
        if (value == 'custom-color') value = window.prompt('Enter Hex Color Code');
        this.quill.format('color', value);
      }
    }
  },
  keyboard: {
    bindings: {
      tab: false,
      custom: {
        key: 13,
        shiftKey: true,
        handler: function () { /** do nothing */ }
      },
      handleEnter: {
        key: 13,
        handler: function () { /** do nothing */ }
      }
    }
  },
  'emoji-toolbar': true,
  'emoji-textarea': true,
  'emoji-shortname': true,
};

const formatsQuill = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent', 'align',
  'link', 'image', 'background', 'color', 'emoji'
];

<ReactQuill
  modules={modulesQuill}
  formats={formatsQuill}
/>

For more information read this: Quill_Quick_Start

Quill js color textbox

2 Answers2