Quill js color textbox

Question

Quillのカラーオプションdropboxに16進数/ rgb/rgba値のテキストボックスを追加して、ユーザーが最初にQuillによって提供されたパレットに制限されることなく好きな色の値を入力できるようにします。 js

私はSpectrum（https://bgrins.github.io/spectrum/）をQuillと組み合わせて使用​​しようとしましたが、ハードに失敗しました。色の値を設定/取得できませんでした。

Answer 1

ツールバーで「カスタムカラー」のオプションを追加し、「カスタムカラー」が選択されているかどうかを確認するようにハンドラーをカスタマイズすることができます。そこから、好きなことをすることができます。下の例では、値を取得するためのプロンプトウィンドウを表示します。

var tools = [ 
 
\t ['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', { 
 
\t modules: { 
 
    \t 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>