当前位置：首页 > React

使用react-quill如何获取文本

2026-01-25 22:52:32React

获取 React-Quill 编辑器文本内容

使用 react-quill 获取编辑器中的文本内容可以通过以下几种方法实现：

方法一：通过 onChange 事件获取

在组件中绑定 onChange 事件处理器，当编辑器内容变化时获取当前值：

import React, { useState } from 'react';
import ReactQuill from 'react-quill';

function Editor() {
  const [content, setContent] = useState('');

  const handleChange = (value) => {
    setContent(value);
    console.log('当前内容:', value); // 获取纯文本
  };

  return <ReactQuill value={content} onChange={handleChange} />;
}

方法二：通过 ref 直接访问编辑器实例

使用 ref 获取编辑器实例后，调用其 API 获取内容：

import React, { useRef } from 'react';
import ReactQuill from 'react-quill';

function Editor() {
  const quillRef = useRef(null);

  const getText = () => {
    const editor = quillRef.current.getEditor();
    console.log('HTML内容:', editor.root.innerHTML);
    console.log('纯文本:', editor.getText());
  };

  return (
    <>
      <ReactQuill ref={quillRef} />
      <button onClick={getText}>获取内容</button>
    </>
  );
}

方法三：获取 Delta 格式内容

需要获取操作记录时可以使用 Delta 格式：

const getDeltaContent = () => {
  const editor = quillRef.current.getEditor();
  console.log('Delta内容:', editor.getContents());
};

注意事项

如果只需要纯文本，建议使用 editor.getText() 而非直接获取 HTML
内容包含 HTML 标签时，editor.root.innerHTML 会返回带格式的 HTML 字符串
在表单提交时，直接使用绑定的状态变量即可获取最新内容
动态设置内容时需通过 value 属性而非直接操作 DOM

内容处理示例

获取内容后去除 HTML 标签的纯文本处理方法：

使用react-quill如何获取文本

const getPlainText = (html) => {
  const temp = document.createElement('div');
  temp.innerHTML = html;
  return temp.textContent || temp.innerText || '';
};