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

Question

我正在为 Reactjs 使用一个 quill js 组件（一个文本编辑器），我正在测试它以查看它的所有功能。

我设法构建了一个带有工具栏的编辑器，但现在我有疑问，我怎样才能获取用户键入的所有内容并将其保存在我的状态中？正如我将在代码中向您展示的那样，如果我 console.log(quillRef.current) 我得到一个 div 并且在其中我有一个 p 元素，其中包含用户键入的所有内容。我的想法是在最后放置一个按钮，当用户停止输入并单击按钮时，我会存储他们输入的内容。

这是我正在测试的沙箱的 link： codesandbox link

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.io/s/react-quilljsbasic-tt6pm?file=/src/App.js

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

Getting values from a text editor in React js

javascript

reactjs

quill