如何访问 ReactQuill api？

Question

我需要使用按钮访问 <ReactQuill/>。例如，我单击按钮并删除或保存 ReactQuill 的内容。但我无法理解如何在 React 中正确访问 ReactQuill 的功能。例如，他们建议使用 quill 变量来访问该组件的功能。例如删除组件 quill.setContents([{ insert: '\n' }]) 的内容但问题是如何正确定义它？

我试着像在一些例子中那样做，但没有成功。

const [quill, setQuill] = useState(null);

       <ReactQuill
        style={{height: '45vh', marginBottom: '1px'}}
        ref={(el) => {
         setQuill(el)
        }}
      />
 
     <Button type="primary" icon={<DeleteOutlined />} 
       onClick={()=> 
        quill.setContents([{ insert: '\n' }])}
      >Clear</Button>

也许有人知道如何正确定义他们的 quill 变量？我正在查看他们的文档，但没有帮助。

Answer 1

使用 ref 而不是 useState

const quill = useRef();

<ReactQuill
    style={{height: '45vh', marginBottom: '1px'}}
    ref={quill}
/>

<Button type="primary" icon={<DeleteOutlined />} 
    onClick={()=> 
    quill.current.editor.insertText(0, "text")}
>Clear</Button>

如何访问 ReactQuill api？

How to access ReactQuill api?

reactjs

react-quill