React wrappers to external packages - Quill JS

help
1

Hi all,

Context: I need a rich text editor in my app, and was thinking of using QuillJS. I need to add custom buttons in the toolbar of QuillJS.

The custom functionality is basically doing a call to an external service and validating the text against the response from the external service. The idea is this is reactive.

The rest of my app is Meteor.

Questions:
(1) There is a React wrapper for Quill JS. Noob Question… Why? This seems stupid, which suggests I don’t understand what the wrapper is for. What is the problem with simply using the original with npm install.
(2) The way I understand it, if one was not using Meteor, would have a stack with some DB, NodeJS, and React as View layer. So what is the point of writing a React wrapper to an external package like QuillJS.
(3) Quill JS is moving versions, and not sure if the React wrapper will be updated. I guess it will in time…

My specific use case related.

(3) Does anyone have a suggestion as to a rich text editor to use where one can customize the buttons in the toolbar? The way i see it currently is do a fork of Quill JS. Add in the buttons that I specifically need. Then implement this fork in my application.
(4) Has anyone used QuillJS in a Meteor app? Any suggestions you would care to share? (Sharing is caring :slight_smile:)

Thanks so much.

Tat

2

bump… anyone… these are not the droids you are looking for?

3

Do you have any news? I have the same doubts about Quill JS. Thanks @tathagatbanerjee

4

(1) There is a React wrapper3 for Quill JS. Noob Question… Why? This seems stupid, which suggests I don’t understand what the wrapper is for. What is the problem with simply using the original with npm install.

React’s strong point is its component system. You can build an entire UI out of components. If you look at Quill’s documentation, the way to use it is to attach it to a DOM node

var quill = new Quill('#editor');
  quill.addModule('toolbar', { container: '#toolbar' });

React is all about rendering components on the shadow DOM, and React really doesn’t want you to manipulate or access the DOM itself. Read the first bit of these React docs https://facebook.github.io/react/docs/more-about-refs.html

So for React it’s preferred to render it as a component


class Something extends Component {
  render() {
   return (
      <ReactQuill>
        <ReactQuill.Toolbar key="toolbar"
                            ref="toolbar"
                            items={ReactQuill.Toolbar.defaultItems} />
        <div key="editor"
             ref="editor"
             className="quill-contents"
             dangerouslySetInnerHTML={{__html:this.getEditorContents()}} />
      </ReactQuill>
    )
  }
}

(3) Does anyone have a suggestion as to a rich text editor to use where one can customize the buttons in the toolbar? The way i see it currently is do a fork of Quill JS. Add in the buttons that I specifically need. Then implement this fork in my application.

ProseMirror is really powerful and extendable.

(3) Quill JS is moving versions, and not sure if the React wrapper will be updated. I guess it will in time…

That’s a common issue with wrapper packages. You may be better off just making your own <QuillEditor> component that uses Quill internally, that way you can bump up the Quill version whenever you want

5

@ricardodovalle,

To be honest, I only just got to this bit in the project, i.e. next couple of days. I was quite keen to try out draftjs, which is basically the editor component used at facebook. It looks like it meets my use case, which is mostly adding random buttons to the editor UI. I have not tried ProseMirror as referenced by @efrancis above either.

Thanks so much.

Tat