从 React Quill 文本编辑器粘贴时如何保持文本格式

Question

我在 SaaS 中使用 React quill (https://www.npmjs.com/package/react-quill)，以便用户可以根据需要编辑和格式化文本（标题、粗体、斜体等）。

我的问题是：当从富文本编辑器复制粘贴到谷歌文档或Word文档时，有没有办法保持文本格式？

它现在不起作用，但我想要它。

Answer 1

默认情况下，当您将内容从富文本编辑器（如 React Quill）复制并粘贴到其他应用程序（如 Google Docs 或 Microsoft Word）时，格式通常会丢失。这是因为不同的应用程序使用不同的格式样式和标记语言。

但是，您可以通过在 React Quill 中实现复制和粘贴事件的自定义处理来启用具有格式保留的复制粘贴功能。以下是实现这一目标的方法：

1. 通过在项目目录中运行以下命令来安装

   html-to-text

   库：

npm install html-to-text

2. 在 React 组件中导入必要的依赖项：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import htmlToText from 'html-to-text';

3. 创建自定义函数来处理粘贴事件并将粘贴的 HTML 转换为纯文本：

const handlePaste = (e) => {
  const clipboardData = e.clipboardData || window.clipboardData;
  const pastedData = clipboardData.getData('text/html');
  const plainText = htmlToText.fromString(pastedData);

  // Do something with the plain text, if needed

  // Prevent Quill's default paste handling
  e.preventDefault();
};

4. 将

   handlePaste

   函数作为 prop 传递给 React Quill 组件：

<ReactQuill
  // other props
  onPaste={handlePaste}
/>

通过实施此方法，您可以拦截粘贴事件，使用

html-to-text

库将粘贴的 HTML 转换为纯文本，并在将其应用到富文本编辑器之前执行任何所需的处理或操作。

请注意，此方法会将粘贴的 HTML 转换为纯文本，因此在粘贴到 Google Docs 或 Microsoft Word 等应用程序时不会保留格式。但是，它允许您使用提取的纯文本，以便根据您的要求进行进一步自定义或处理。

Answer 2

羽毛笔文本编辑器不支持复制和粘贴工具