从React js中的文本编辑器中获取值

Question

我正在使用Reactjs的quill js组件（一个文本编辑器），我正在测试它的所有功能。我成功地建立了一个带有工具栏的编辑器，但现在我有一个疑问，我如何获得用户输入的所有内容并将其保存在我的状态中？我将在代码中向你展示，如果我 console.log(the quillRef.current)，我得到一个 div，在它里面我有一个 p 元素，其中包含用户输入的所有内容。我的想法是在最后放置一个按钮，当用户停止输入并点击按钮时，我将存储他输入的内容。

这里是我测试沙盒的链接。代码沙盒链接

Answer 1

有了 quill.getText() 功能:

import React, { useState } from "react";

import { useQuill } from "react-quilljs";

export default () => {
  const { quill, quillRef } = useQuill();
  const [savedText, setSavedText] = useState("");

  const handleSave = () => {
    const text = quill.getText();
    setSavedText(text);
  };


  return (
    <div style={{ width: 500, height: 300 }}>
      <button onClick={handleSave}>SAVE</button>
      <div>Saved State : {savedText}</div>
      <div ref={quillRef} />
    </div>
  );
};

检查codesandbox。https:/codesandbox.iosreact-quilljsbasic-tt6pm?file=srcApp.js。