Colors 羽毛笔js彩色文本框

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

---

我尝试将Spectrum（）与Quill结合使用，但失败了，我无法设置/获取颜色值。

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

//向颜色工具添加“自定义颜色”选项
变量工具=[
[“粗体”、“斜体”、“下划线”、“删除”]，
（颜色）以下的颜色：：“（颜色）颜色：：：”””””，“[[35'颜色的颜色：”””，“[35'颜色颜色的颜色：””，“[颜色颜色颜色：”””””，“[颜色的颜色：：””，“[35'颜色的颜色：”，“[35'颜色：000000”000000“，，，，““[35.EE6万万万，”，”以及“FF990.FF990 0 0.0.0万“，，”，，”，““，”，“FF990-FF990，”，”，”，”，”，”，”以及“基金基金会际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际际“，”ffff66“，”B966“，”A3E0“，”c285ff“，”88888“，”a10000“，”b26b00“，”b2b200“，”006100“，”0047b2“，”6b24b2“，”444444“，”5c0000“，“#663d00”、“#666600”、“#003700”、“#002966”、“#3d1466”、“自定义颜色”]]
];
var quillEditor=new Quill（“#编辑器容器”{
模块：{
工具栏：工具
},
主题：“雪”
});
//自定义颜色工具处理程序
quillEditor.getModule（'toolbar'）.addHandler（'color'，（值）=>{
//如果用户单击“自定义颜色”选项，则显示提示窗口以获取颜色
如果（值==“自定义颜色”）{
值=提示（“输入十六进制/RGB/RGBA”）；
}
quillEditor.format（'color'，value）；
})；

.ql color.ql选择器选项[数据值=自定义颜色]{
背景：无！重要；
宽度：100%！重要；
高度：20px！重要；
文本对齐：居中；
}
.ql color.ql选择器选项[数据值=自定义颜色]：之前{
内容：“自定义颜色”；
}
.ql color.ql选择器选项[数据值=自定义颜色]：悬停{
边框颜色：透明！重要；
}

---

用于React_-Quill自定义颜色代码文本框（React-Quill npm）

import ReactQuill，{Quill}来自'react Quill'；
从“quill表情符号”中导入quillEmoji；
导入'react quill/dist/quill.snow.css'；
const{EmojiBlot，shortnameMoji，ToolbarEmoji，TextAreaEmoji}=quillEmoji；
羽毛套({
“格式/表情符号”：表情符号，
“模块/表情符号短名称”：短名称表情符号，
“模块/表情工具栏”：工具栏表情，
'modules/emoji textarea'：TextAreaEmoji
}，对）；
常数模quill={
工具栏：{
容器：[
[{'header'：[1,2,3,4,5,6,false]}，
[{'font'：[]}]，
[{'align'：[]}]，
[“粗体”、“斜体”、“下划线”]，
[{'list'：'ordered'}，{'list'：'bullet'}，{'color':“零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零零#ffff66'、#66b966'、#66a3e0'、#c285ff'、#8888'、#a1000'、#b2b000'、#b2b200'、#006100'、#0047b2'、#6b24b24b2'、#44444444'、355c0000'、355c000'、353d6600'、'#003700'、'#002966'、'#3d1466'、'自定义颜色']}、{'background'：[]}、'link'，'emoji']，
],
处理程序：{
“颜色”：函数（值）{
如果（值=='custom color'）值=window.prompt（'Enter Hex color Code'）；
此.quill.format（'color'，value）；
}
}
},
键盘：{
绑定：{
标签：错误，
自定义：{
关键字：13，
shiftKey：对，
处理程序：函数（）{/**什么都不做*/}
},
扶手中心：{
关键字：13，
处理程序：函数（）{/**什么都不做*/}
}
}
},
“表情工具条”：正确，
“表情文字区”：正确，
“表情符号短名称”：正确，
};
常量formatsQuill=[
“标题”、“字体”、“大小”，
“粗体”、“斜体”、“下划线”、“删除”、“块引号”，
“列表”、“项目符号”、“缩进”、“对齐”，
“链接”、“图像”、“背景”、“颜色”、“表情符号”
];

---

有关更多信息，请阅读此内容：

感谢分享！开发人员注意，

color

在颜色列表的末尾有“

自定义颜色”

。它不会更改工具栏中

A

下的行的颜色。它应该是当前选择的颜色。

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