Looking for an experienced developer to ask some questions!


#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:


#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?