从Angular Application复制/粘贴时保持文本格式

Question

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

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

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

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

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

我已经开始使用Angular 8 + Angular Material进行项目，并且遇到了相同的问题。

Answer 1

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

为什么它不能按您期望的那样工作：

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

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

仅用于您的丰富文本副本

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

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

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

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

2. 将该内容转换为富文本格式。上面的示例只是复制HTML，但不会被外部CSS应用样式。 Quill MIGHT 之类的程序包使您可以选择撤回富文本。

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

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