CODEWITHSUNDEEP
javascriptquill
A. L
A. L

Reputation: 12649

quilljs allow user to pick color like input

So I know you can add color options to the color field, e.g.

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

But I was wondering if there was a way to make it so that the user can choose the colors like in a 

<input type="color">

Upvotes: 4

Views: 10780

Answers (4)

Innocent Josiah Patrick
Innocent Josiah Patrick

Reputation: 29

okay after a bit of research I found that using the input type color for quill bg and text color is pretty straight forward. you have to give the input an identifier and an event listener and then feed quill with the data when changed. example;

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

Upvotes: 0

Rohinibabu
Rohinibabu

Reputation: 678

To add custom color in ngx-quill we can use select with option color:

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

Upvotes: 0

Dipen Shah
Dipen Shah

Reputation: 26075

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>

Upvotes: 20

Sven Liivak
Sven Liivak

Reputation: 1413

Did you mean colorpicker to the toolbar?

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

Upvotes: 4

Related Questions