javascript - quilljs 允许用户像输入一样选择颜色

Question

所以我知道您可以向颜色字段添加颜色选项，例如

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

但我想知道是否有一种方法可以让用户可以像在

<input type="color">

Answer 1

您可以使用自定义工具栏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>