quilljs 允许用户选择颜色，如输入

Question

所以我知道你可以在颜色字段中添加颜色选项，例如

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

但我想知道是否有办法让用户可以选择颜色

<input type="color">

Answer 1

You can use custom toolbar handler and with a bit of javascript you can work your way out.

Take a look at the code snippet below, which basically adds a hidden color input to the dom and then uses it to open color picker dialog. You can modify it to look more elegant, code below is just for your reference.

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>