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

【问题标题】：Getting values from a text editor in React js从 React js 中的文本编辑器获取值
【发布时间】：2020-10-03 10:41:00
【问题描述】：

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

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

这是我正在测试它的沙盒的链接： codesandbox link

【问题讨论】：

标签： javascript reactjs quill

【解决方案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>
  );
};

检查代码框：https://codesandbox.io/s/react-quilljsbasic-tt6pm?file=/src/App.js

【讨论】：

有没有办法通过用户应用的样式获取这些数据？
我不知道，您需要仔细检查库和文档：github.com/gtgalone/react-quilljs
@GabrielTiso 样式已经导入quill/dist/quill.snow.css，您需要做的就是在您将呈现生成的html的div中具有类名className="ql-editor"，所有样式将立即应用