3

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

enter image description here

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?

Стас Рябцев
  • 1,318
  • 4
  • 19
  • 36
  • Does it have to be `quill`? I'd avoid jQuery as it doesn't play well with react and increases the bundle size. There is [react-mde](https://github.com/andrerpena/react-mde) and you can use [showdown](https://github.com/showdownjs/showdown) to display the input. See a live example here: https://codesandbox.io/s/react-mde-latest-5i5ov?file=/src/index.js – trixn Nov 24 '20 at 15:58
  • in your example, inserting markdown into text don't work ((( – Стас Рябцев Nov 24 '20 at 16:02

2 Answers2

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}
  />
Lakindu Hewawasam
  • 680
  • 4
  • 9
0

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);
});
Dmitry Khmara
  • 51
  • 1
  • 3