How to add a color picker to React Quill toolbar

Question

I want to use react-quill for my react rich text editor but I couldn't find a way to add a color picker in the toolbar. I'm also using typescript. here is my component:

const modules = {
  toolbar: [
    [{ font: ['', 'times-new-roman', 'arial'] }],
    [{ header: [1, 2, 3, false] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
    ['link'],
    ['clean']
   
  ],
}
function RichTextEditor() {
  return <ReactQuill theme="snow" modules={modules} formats={formats} preserveWhitespace />
}

score 2 · Answer 1 · answered Jan 18 '23 at 08:41

You can use custom toolbar with javascript like this, it might works!

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>

This is an example with javascript, you can convert into typescript if you want. Thank you.

thank you! but is there any way to make this happen just using react's jsx? if not, is there any other library to do this more easily? — fatemeh zamanipour, Jan 18 '23 at 08:49
Not sure about the library, you can do it with javascript if you want. Please do upvote if you find it helpful. — Priyen Mehta, Jan 18 '23 at 08:55

How to add a color picker to React Quill toolbar

1 Answers1