I need to add a custom toolbar button inside the react quill HTML editor.

I have followed the tutorial but was not able to get this to work. The code is as follows.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import ReactQuill from 'react-quill'; // ES6

import './style.scss';

class DocumentForm extends Component {

  constructor(props) {
    super(props);

    this.state = {
      file: null,
      documentDetails: {},
      text: ''
    };
    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.modules =  {
      toolbar: [
        [{ 'header': [1, 2, false] }],
        ['bold', 'italic', 'underline','strike', 'blockquote'],
        [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
        ['link', 'image'],
        ['clean']
      ],
    }

    this.formats = [
      'header',
      'bold', 'italic', 'underline', 'strike', 'blockquote',
      'list', 'bullet', 'indent',
      'link', 'image'
    ]
  }

  handleEditorChange(value) {
    this.setDocumentDetails('html_content', value)
  }

  render() {
    let selectedDocument = this.state.documentDetails;
    return (
             <div>
                 <div>
                      <div className="form-group">
                        <label>File Content</label>
                        <Editor placeholder={'Write something or insert a star ★'}/>,
                      </div>
                  </div>
             </div>
    );
  }
}

export default  DocumentForm


/*
 * Custom "star" icon for the toolbar using an Octicon
 * 
 */
const CustomButton = () => <span className="octicon octicon-star" />

/*
 * Event handler to be attached using Quill toolbar module
 * /
 */
function insertStar () {
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, "★")
  this.quill.setSelection(cursorPosition + 1)
}

/*
 * Custom toolbar ponent including insertStar button and dropdowns
 */
const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
)

/*
 * Editor ponent with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { editorHtml: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (html) {
    this.setState({ editorHtml: html });
  }

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={Editor.modules}
        />
      </div>
    )
  }
}

/*
 * Quill modules to attach to editor
 * See / for plete options
 */
Editor.modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      "insertStar": insertStar,
    }
  }
}

/*
 * Quill editor formats
 * See /
 */
Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'color',
]

Unlike the tutorial there were 2 toolbars The custom toolbar was displayed but the buttons were not having styles. Also the button handler(insertStar) is not working.

A screenshot of the page is as follows.

Any idea on how to fix this

I need to add a custom toolbar button inside the react quill HTML editor.

I have followed the tutorial https://github./zenoamaro/react-quill#custom-toolbar but was not able to get this to work. The code is as follows.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import ReactQuill from 'react-quill'; // ES6

import './style.scss';

class DocumentForm extends Component {

  constructor(props) {
    super(props);

    this.state = {
      file: null,
      documentDetails: {},
      text: ''
    };
    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.modules =  {
      toolbar: [
        [{ 'header': [1, 2, false] }],
        ['bold', 'italic', 'underline','strike', 'blockquote'],
        [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
        ['link', 'image'],
        ['clean']
      ],
    }

    this.formats = [
      'header',
      'bold', 'italic', 'underline', 'strike', 'blockquote',
      'list', 'bullet', 'indent',
      'link', 'image'
    ]
  }

  handleEditorChange(value) {
    this.setDocumentDetails('html_content', value)
  }

  render() {
    let selectedDocument = this.state.documentDetails;
    return (
             <div>
                 <div>
                      <div className="form-group">
                        <label>File Content</label>
                        <Editor placeholder={'Write something or insert a star ★'}/>,
                      </div>
                  </div>
             </div>
    );
  }
}

export default  DocumentForm


/*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.github.io
 */
const CustomButton = () => <span className="octicon octicon-star" />

/*
 * Event handler to be attached using Quill toolbar module
 * http://quilljs./docs/modules/toolbar/
 */
function insertStar () {
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, "★")
  this.quill.setSelection(cursorPosition + 1)
}

/*
 * Custom toolbar ponent including insertStar button and dropdowns
 */
const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
)

/*
 * Editor ponent with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { editorHtml: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (html) {
    this.setState({ editorHtml: html });
  }

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={Editor.modules}
        />
      </div>
    )
  }
}

/*
 * Quill modules to attach to editor
 * See http://quilljs./docs/modules/ for plete options
 */
Editor.modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      "insertStar": insertStar,
    }
  }
}

/*
 * Quill editor formats
 * See http://quilljs./docs/formats/
 */
Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'color',
]

Unlike the tutorial there were 2 toolbars The custom toolbar was displayed but the buttons were not having styles. Also the button handler(insertStar) is not working.

A screenshot of the page is as follows.

Any idea on how to fix this

• javascript
• reactjs

• This glitchy type of appearance can happen when rendering more than one quill editor but using a non-unique toolbar query selector for your custom toolbar (for example). Though, based on your code, it would appear that you are only rendering one quill editor. – Joe Van Leeuwen Commented Aug 30, 2021 at 20:06

3 Answers 3

According to the quill.js guide, you need to import the CSS like following

@import "~quill/dist/quill.core.css"

In Reactquill documentation https://www.npmjs./package/react-quill#import-the-stylesheet the stylesheet must be imported as:

require('react-quill/dist/quill.snow.css'); // CommonJS
import 'react-quill/dist/quill.snow.css'; // ES6

Try importing, the stylesheet like:

import "react-quill/dist/quill.snow.css"