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>

Answer 2

对于 React_Quill 自定义颜色代码文本框 (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}
/>

更多信息请阅读：Quill_Quick_Start