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

Question

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

我以 Angular 材网站为例:https://material.angular.io/

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

也就是说，粘贴的文本丢失了居中对齐、颜色和字体类型。

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

我开始了一个使用 Angular 8 + Angular Material 的元素，但我遇到了同样的问题。

Answer 1

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

为什么它没有像您预期的那样工作:

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

但是，当您从 HTML 复制(在您的浏览器中)时，您得到的只是没有所有“丰富”格式的文本。发生这种情况是因为浏览器使用外部上下文，如 DOM 位置、标签 类型和 CSS 将 HTML 内容设置为呈现给您的内容看。

仅供您使用的富文本副本

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

元素所有用户的富文本副本

不幸的是，这更复杂。您将需要编写代码来执行以下操作(answer 有一个很好的示例):

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

2. 将该内容转换为富文本格式。上面的示例只是简单地复制了 HTML，但不会获得外部 CSS 应用的样式。像Quill这样的包可能 为您提供恢复富文本的选项。

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

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