install quilljs-markdown on react

Question

I need such an editor on react https://cloverhearts.github.io/quilljs-markdown/ , as you can see in it you can put markdown characters directly into the text.

when I do this

import React, { Component } from 'react'
import './App.css'
import ReactQuill from 'react-quill'
import Quill from 'quill'
import QuillMarkdown from 'quilljs-markdown'




const App = () => {
  const editor = new Quill('#editor', {
    theme: 'snow'
  })
  new QuillMarkdown(editor)

  return (
    <div className='app'>
      {/*<MyComponent/>*/}
      <div id="editor"></div>
    </div>
  )
}

export default App

I get error TypeError: Cannot read property 'on' of undefined

as I understand I need jQuery for work, but I use react, I found https://www.npmjs.com/package/react-quill this quilljs for react, but I don't know how to combine it with markdown https://www.npmjs.com/package/quilljs-markdown can anyone help?

Answer 1

It seems like you are trying to initialize the Quill instance and the markdown module before the editor is ready.

Use useEffect hook to initialize it after the div has been rendered:

import {useEffect} from 'react';

...

useEffect(() => {
  const editor = new Quill('#editor', {
    theme: 'snow'
  });

  new QuillMarkdown(editor);
});

Answer 2

I found the solution for this after hours of trying this out.

What you have to do is this:

1. Create a module for ReactQuill
2. Register the module.
3. Pass modules to react quill

Shown Below.

Step 01

const modules = {
  markdownOptions: {}
};

Step 02

Quill.register('modules/markdownOptions', QuillMarkdown);

Step 03

<ReactQuill
    modules={modules}
  />