Looking for an experienced developer to ask some questions!

help
1

Hi everyone,

I have been building my first Meteor Application in combination with React on the front-end.

All has going pretty well but as I get closer to the end things are getting more complicated.

I would really like to find someone to ask some questions about some of the things I am trying to achieve.

If has some free time in the coming days please reach out to me.

The things I am currently struggling with:

  • Adding roles to my users
  • Getting Quill to work in my application
  • Displaying the text (adding by users or admins) from my database in a nice way (read adding paragraphs and such).
  • Getting my social logins to work (I am not using the default meteor social login)

All help is highly appreciated!

Have a great day and do not forget to smile,
Dominic

2

You should try meteoruniversity. Free and helpful.

3

There’s a React Quill port that I’ve used once in a non meteor application:

4

Thanks a lot for your replies! The meteoruniversity looks very interesting!

I have also found the React Quill, but can’t seem to get it working propperly.

5

Perhaps you could specify some details?

6

I think it might actually have to do with the fact I using the latest version of React.
When installing React-Quill I get the following message:

±- UNMET PEER DEPENDENCY react@15.4.1
`-- react-quill@0.4.1

Then when I try to setup the Quill element in my react app, I only see the words of the bar instead of the fully formatted Quill bar.

First I import ReactQuill from ‘react-quill’;

Then I add the following code:

 _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" 
  ],

  render: function() {
    return (
      <div className='_quill'>
        <ReactQuill theme='snow' 
                    modules={this._quillModules}
                    formats={this._quillFormats}
                    toolbar={false} // Let Quill manage toolbar
                    bounds={'._quill'}>
          <div key="editor"
                ref="editor"
                className="quill-contents border_solid_top"
                dangerouslySetInnerHTML={{__html:this.state.editorContent}} />
        </ReactQuill>
      </div>
    );
  }
});
7

Do you have the stylesheet? I had a problem when it referenced a stylesheet that didn’t exist in the node modules so I copied it into the component’s folder and imported it with:

import ‘./quill.snow.css’;

https://github.com/zenoamaro/react-quill/blob/master/quill/quill.snow.css

8

I’m gonna try that out. I did add the stylesheet in the header of my application but didn’t try importing it in the component itself yet. I’ll get back to you in a sec.

Thanks for taking the time to help.

9

Hmmm…

It’s getting more and more strange… Now I do see an input field that is style by the added css but now I don’t see any toolbar anymore.

Did you btw add the _quillModules and the _quillFormats in the same file or did you import them?

10

As a matter of fact, I went with the simplest route possible. Try it like this first and then add on.
(edit is a boolean for read/write)

<ReactQuill theme={‘snow’}
onChange={this.onTextChange}
value={this.state.text}
toolbar={edit ? undefined : false} readOnly={!edit}
/>

11

So remove the whole part of the modules as well?

12

After adding this I got this error:
Uncaught ReferenceError: edit is not defined(…)

13

Yep, thats basically all my render returns

14

Thats my own variable I use for locking the text, just set somewhere above inside your render method : const edit=true;

15

It’s progress!

This is what I am seeing now:

1140×228 4.34 KB

16

Hm, check if your stylesheet is loading properly in the browser, you should be able to get the proper toolbar without too much effort.

17

Yup the css file which you linked to is being loaded and is connected with the elements, but still no proper toolbar. :frowning:

18

I thought it might have to do something with the fact that I am using it within a form, but also removing it from the form creates the same result…

19

I should say I’m on React 15.3.2, although don’t think it should make much of a difference. I use it as a widget on a grid (react-grid-layout) and the library is quite buggy so that’s why only the simplest approach worked for me. Perhaps you could try it out in a separate barebones project just to see if you can get it to work.

20

I got the toolbar working!!! I think it had to do with the fact the npm install I did was pretty old.

So after reading some more about it I found this: React-Quill Updated.

Which I added, it installed some additional packages and then it worked!

So my next question is who do I get a full toolbar, just adding the modules back in there right?