Quill js颜色文本框

Posted 2023-02-25

【中文标题】Quill js颜色文本框

【英文标题】：Quill js color textbox

【发布时间】：2017-02-06 12:54:36

【问题描述】：

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

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

【参考方案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>

【讨论】：

感谢分享！开发人员注意到，color 在颜色列表的末尾有“custom-color”。

它不会改变工具栏中A 下的线条颜色。它应该是当前选择的颜色。

【参考方案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