quilljs 允許用戶像輸入一樣選擇顏色

Question

所以我知道您可以向顏色字段添加顏色選項，例如

[{'color': "#000000"}]

但我想知道是否有辦法讓用戶可以選擇 colors 就像在

<input type="color">

Answer 1

您可以使用自定義工具欄處理程序 ，還可以使用一些JavaScript來解決問題。

看一下下面的代碼片段，該代碼片段基本上向dom添加了隱藏的顏色輸入，然后使用它打開顏色選擇器對話框。 您可以對其進行修改以使其看起來更優雅，下面的代碼僅供您參考。

 var quill = new Quill('#editor-container', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'], [{ 'color': ['#F00', '#0F0', '#00F', '#000', '#FFF', 'color-picker'] }] ] }, placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' }); function showColorPicker(value) { if (value === 'color-picker') { var picker = document.getElementById('color-picker'); if (!picker) { picker = document.createElement('input'); picker.id = 'color-picker'; picker.type = 'color'; picker.style.display = 'none'; picker.value = '#FF0000'; document.body.appendChild(picker); picker.addEventListener('change', function() { quill.format('color', picker.value); }, false); } picker.click(); } else { quill.format('color', value); } } var toolbar = quill.getModule('toolbar'); toolbar.addHandler('color', showColorPicker); 

 #editor-container { height: 375px; } .ql-color .ql-picker-options [data-value=color-picker]:before { content: 'Pick Color'; } .ql-color .ql-picker-options [data-value=color-picker] { background: none !important; width: 100% !important; height: 25px !important; text-align: center; color: blue; text-decoration: underline; } 

 <script src="//cdn.quilljs.com/1.3.6/quill.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/> <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet"/> <div id="editor-container"> </div> 

Answer 2

您是說工具欄上的拾色器嗎？

toolbar: [{ 'color': [] }, { 'background': [] }]

Answer 3

要在 ngx-quill 中添加自定義顏色，我們可以使用帶有選項顏色的 select：

<select class="ql-color">
                    <option value="#048543"></option>
                    <option value="#f6a11d"></option>
                    <option value="#a3a3a3"></option>
                    <option value="#fff"></option>
                </select>

Answer 4

好吧，經過一番研究后，我發現使用輸入類型顏色作為羽毛筆 bg 和文本顏色非常簡單。 您必須為輸入提供一個標識符和一個事件偵聽器，然后在更改時將數據提供給羽毛筆。 例子;

 var quill = new Quill("#editor", { modules: { toolbar: { container: "#toolbar", }, }, }); //IMPORTANT PART let quillColor = document.querySelector("#quillColor"); quillColor.onchange = function () { let color = quillColor.value; quill.format("color", color); };

 <input type="color" id="quillColor" />