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.

Answer 1

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>