colors - Quill js 颜色文本框

Question

我想在 Quill 的颜色选项下拉框中为 hex/rgb/rgba 值添加一个文本框，以便我的用户可以输入他们喜欢的颜色值，而不受 Quill.js 最初提供的调色板的限制

我尝试将 Spectrum ( https://bgrins.github.io/spectrum/ ) 与 Quill 结合使用，但我失败了，我无法设置/获取颜色值。

Answer 1

您至少可以在工具栏中为“自定义颜色”添加一个选项，然后自定义处理程序以检查是否选择了“自定义颜色”。从那里你可以做任何你喜欢的事情。在下面的示例中，我只显示了一个提示窗口来获取值。

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