reactjs - 在反应上安装 quilljs-markdown

Question

我需要这样的编辑器来响应https://cloverhearts.github.io/quilljs-markdown/，正如您在其中看到的，您可以将降价字符直接放入文本中。

当我这样做时

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

我收到错误 TypeError: Cannot read property 'on' of undefined

据我了解，我需要 jQuery 来工作，但我使用 react，我发现https://www.npmjs.com/package/react-quill这个 quilljs 用于反应，但我不知道如何将它与 markdown https 结合起来： //www.npmjs.com/package/quilljs-markdown 谁能帮忙？

Answer 1

经过数小时的尝试，我找到了解决方案。

你需要做的是：

1. 为ReactQuill
2. 注册模块。
3. 传递模块以响应 quill

如下图所示。

步骤 01

const modules = {
  markdownOptions: {}
};

步骤 02

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

步骤 03

<ReactQuill
    modules={modules}
  />

Answer 2

似乎您正在尝试在编辑器准备好之前初始化 Quill 实例和 markdown 模块。

useEffect在 div 被渲染后使用hook 来初始化它：

import {useEffect} from 'react';

...

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

  new QuillMarkdown(editor);
});