quilljs 允许用户像输入一样选择颜色
quilljs allow user to pick color like input
所以我知道您可以向颜色字段添加颜色选项,例如
[{'color': "#000000"}]
但我想知道是否有办法让用户可以像
中那样选择颜色
<input type="color">
您是说工具栏的颜色选择器吗?
toolbar: [{ 'color': [] }, { 'background': [] }]
您可以使用自定义工具栏 handler 并稍微 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>
要在 ngx-quill 中添加自定义颜色,我们可以使用 select 和选项颜色:
<select class="ql-color">
<option value="#048543"></option>
<option value="#f6a11d"></option>
<option value="#a3a3a3"></option>
<option value="#fff"></option>
</select>
所以我知道您可以向颜色字段添加颜色选项,例如
[{'color': "#000000"}]
但我想知道是否有办法让用户可以像
中那样选择颜色<input type="color">
您是说工具栏的颜色选择器吗?
toolbar: [{ 'color': [] }, { 'background': [] }]
您可以使用自定义工具栏 handler 并稍微 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>
要在 ngx-quill 中添加自定义颜色,我们可以使用 select 和选项颜色:
<select class="ql-color">
<option value="#048543"></option>
<option value="#f6a11d"></option>
<option value="#a3a3a3"></option>
<option value="#fff"></option>
</select>