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