javascript - 从 React js 中的文本编辑器获取值
问题描述
我正在为 Reactjs 使用一个 quill js 组件(一个文本编辑器),我正在测试它以查看它的所有功能。
我设法用工具栏构建了一个编辑器,但现在我有一个疑问,如何获取用户键入的所有内容并将其保存在我的状态中?正如我将在代码中向您展示的那样,如果我 console.log(the quillRef.current) 我得到一个 div 并且在其中我有一个包含用户键入的所有内容的 ap 元素。我的想法是在最后放置一个按钮,当用户停止输入并单击按钮时,我会存储他们输入的内容。
这是我正在测试它的沙箱的链接: codesandbox link
解决方案
带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
推荐阅读
- azure-devops - 如何将 Azure Webjob 从 Azure DevOps 部署到 wwwroot\App_Data\jobs\triggered\MyWebJob?
- react-navigation - React-Navigation:在两个底部选项卡中使用相同的屏幕
- android - Android 8 - 使用过滤器 com.google.firebase.MESSAGING_EVENT 注册两个不同的服务
- spring-boot - ResouraseServerConfiger 中 antMancher 的动态 url
- python - PyQtGraph:基于值的不同符号或符号颜色
- django - 数据表多搜索过滤器未更新跳过表选项卡
- css - 悬停的 CSS 深层元素
- rest - 经典服务器中的进度 REST PUT 返回错误
- flutter - 颤振 - 如何在弹出窗口中创建表单
- docker - 从 Docker 运行 VNC