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

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}
  />