css - 从 Angular 应用程序复制/粘贴时保持文本格式

Question

我已经意识到，当我尝试将文本从 Angular 应用程序复制/粘贴到任何文本编辑器软件（即 Microsoft Word）时，所有文本都会丢失原始格式。

我以角材料网站为例：https ://material.angular.io/

当我在 Microsoft Word 中复制文本和过去时：

这意味着，粘贴的文本失去了中心对齐、颜色和字体类型。

有没有办法保持网站格式？我知道 Angular Material 使用的字体与文本编辑器不同，但还有其他东西可以保留（即对齐、颜色等）。

我已经使用 Angular 8 + Angular Material 开始了一个项目，我也面临同样的问题。

标签： cssangular

Answer 1

好吧，您不太可能获得直接的复制/粘贴操作来执行您的请求。

为什么它不能按预期工作：

例如，从 MS Word 中复制和粘贴，您将看到Rich Text所有格式都是数据有效负载的一部分。当您将其复制到剪贴板时，所有额外的样式元数据都会与文本一起出现。如果您将该数据粘贴到富文本编辑器（不是直接的text input）中，例如 Wordpress 的 Admin，那么该编辑器包会将您看不到的文本元数据转换为等效的 HTML 样式。

但是，当您从 HTML（在您的浏览器中）复制时，您得到的只是没有所有“丰富”格式的文本。发生这种情况是因为浏览器使用外部上下文（如DOM位置、tag类型）并将CSSHTML 内容样式化为呈现给您的内容。

富文本副本仅供您使用

Chrome 和 Firefox 有多个浏览器插件，它们会拦截您的复制请求，创建格式，然后将其粘贴到剪贴板。只需向 Google 寻求建议即可。

项目的所有用户的富文本副本

不幸的是，这更复杂。您需要编写代码来执行以下操作（这个答案有一个很好的例子）：

1. 找出用户试图复制的内容（通常映射到选定的文本）。

2. 将该内容转换为富文本格式。上面的示例只是简单地复制了 HTML，但不会让外部 CSS 应用样式。像Quill MIGHT这样的软件包可以让您选择恢复富文本。

3. 将转换后的文本复制到用户的本地剪贴板。您不应该劫持浏览器命令来执行此操作，这就是您经常看到“复制到剪贴板”按钮来执行此操作的原因。您可以在大多数现代浏览器中使用剪贴板 API将内容移动到用户的剪贴板。

4. 哦，您需要用户的许可才能执行所有这些操作，因为主动与用户的剪贴板交互会带来相当大的安全问题。