Problems adding react-quill

help
1

Hi everyone,

I have been trying to add react-quill to my application but for some reason I have not been able to succeed.
I can add the toolbar but it shows up like this:

1132×180 3.24 KB

If I then add theme=“snow” to the component it looks like this:

1140×222 4.23 KB

This is my code at the moment:

import ReactQuill from 'react-quill';

export default class AddSpark extends Component {
  constructor(props) {
    super(props);
 }
    _quillModules: {
      toolbar: [ 
          [{ 'header': [1, 2, false] }],
          ['bold', 'italic', 'underline','strike', 'blockquote'],
          [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}], 
          ['link', 'image'], 
          ['clean'] 
      ]
      /* ... other modules */
  }

    _quillFormats: [ 
        "header",
        "bold", "italic", "underline", "strike", "blockquote",
        "list", "bullet", "indent",
        "link", "image" 
    ]
  }

and my quill component:

            <ControlLabel>Content</ControlLabel>
              <div className='_quill'>
                <ReactQuill 
                  theme= 'snow'
                  value={this.state.value}
                  modules={this._quillModules}
                  formats={this._quillFormats} 
                  ref={(input) => this.content = input}>
                  <div key="editor"
                    ref="editor"
                    className="quill-contents border_solid_top"
                    dangerouslySetInnerHTML={{__html:this.state.editorContent}} />
                </ReactQuill>
              </div>

I really would love to have a toolbar as we have here, it looks amazing and works just the way I would like mine to work.

Anyone any idea what I am doing wrong?

Cheers,
Dominic

2

With the help of @a.com I managed to solve this.

It turned out it had to do with the way it was added in package.json.

If someone else runs into this problem check how it added there.
In my project I had in my package.json file something like this:
“react-quill”: “version number”

But in an other project there was :
“react-quill”: “git+https://github.com/zenoamaro/react-quill.git”

After making the change and running npm install again it worked!

Thnk @a.com!

3

I’ve got react-quill working fine, I’m trying to change the toolbar, but it always shows the default toolbar. Any suggestions?

constructor(props) {
		super(props);
		this.state = {
			editorHtml: ''
		}

		this.handleChange = this.handleChange.bind(this);
	}

	modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      ['link']
    ],
  }

  formats: [
    'bold', 'italic', 'underline',
    'list', 'bullet',
    'link'
  ]

And this is the component:

<ReactQuill
	 theme={'snow'}
	 ref="comment"
	 id={Session.get('commentId')}
	 onChange={this.handleChange}
	 value={this.state.editorHtml}
	 modules={this.modules}
	 formats={this.formats}
	 placeholder="add your comment here"
/>
4

Looks like you are missing the stylesheets. For me to get it working I added the quill css to my less files.

5

I’ve got the stylesheets in my index.html file and everything looks fine - it’s just I don’t want the full default toolbar.

7

I’m linked to the snow.css - everything is fine, it’s just I’m getting the full default toolbar instead of the options in the modules (toolbar) array.

8

I was able to resolve it with:

var quillModules = {
			toolbar: [
				['bold', 'italic', 'underline'],
				[{'list': 'ordered'}, {'list': 'bullet'}],
				['link']
			]
		};

and then passing it as follows:

	<ReactQuill
		 theme={'snow'}
		 ref="comment"
		 id={Session.get('commentId')}
		 onChange={this.handleChange}
		 value={this.state.editorHtml}
		 modules={quillModules}
		 placeholder="add your comment here"
	/>