复制 HTML 内容时如何查看被复制的隐藏格式？答案

【问题标题】：How to see the hidden formats that get copied when copying HTML content?复制 HTML 内容时如何查看被复制的隐藏格式？
【发布时间】：2014-07-23 09:57:11
【问题描述】：

有没有办法复制样式化的 HTML 并获得 Chrome 看到的相关格式？例如，如果我复制此问题的标题，将其粘贴到我的时事通讯提供商 (MailChimp) 提供的文本编辑器中，然后切换到 HTML 模式，我可以看到实际复制的是：

<h1 itemprop="name" style="margin: 0px 0px 7px; padding: 0px; border: 0px; font-size: 23.3333339691162px; vertical-align: baseline; font-family: 'Trebuchet MS', 'Liberation Sans', 'DejaVu Sans', sans-serif; line-height: 1.3; background: rgb(255, 255, 255);">
    <a href="http://stackoverflow.com/questions/24907135/error-cannot-read-property-of-undefined" class="question-hyperlink" style="margin: 0px; padding: 0px; border: 0px; font-size: 23.3333339691162px; vertical-align: baseline; color: rgb(0, 0, 0); text-decoration: none; cursor: pointer; background: transparent;">
        How to see the hidden formats that get copied when copying HTML content?
    </a>
</h1>

有没有一种使用专用工具（不是我的时事通讯提供商）提取此信息的简单方法？

编辑：为了清楚起见，如果我检查标题标题并单击 Copy，我会得到没有嵌入 CSS 的 HTML：

<h1 itemprop="name">
    <a href="/questions/24907376/how-to-see-the-hidden-formats-that-get-copied-when-copying-html-content" class="question-hyperlink">How to see the hidden formats that get copied when  copying HTML content?
    </a>
</h1>

【问题讨论】：

关联格式是什么意思？
@VarunDas CSS 样式
它们不是隐藏格式。只需将其复制并粘贴到记事本中，或先检查它，然后复制节点
复制 HTML 可以通过上下文菜单选项“复制 HTML”来实现。为什么只需要与那个 HTML 分支相关的 CSS？
@VarunDas 复制节点不会同时复制独立/嵌入的 CSS 样式属性。

标签： html css google-chrome copy-paste

【解决方案1】：

您要做的是导出独立的 HTML。您的问题并不完全清楚，但我假设您正在尝试从您控制的页面中检索它，因此您可以运行 Javascript。

这意味着，在运行时，您需要确定每个元素的有效“计算”样式，并将它们应用到元素本身。之后，您可以简单地读取和处理包含元素的 innerHTML 以检索您的独立内容。

Read the excellent answers on this question 了解如何检索每个元素的运行时计算样式。然后通过其style 属性将它们中的每一个显式应用于元素本身。 innerHTML 属性将在返回值中反映这些变化。

如果您尝试在其上执行此操作的网页在您的控制之下，您始终可以使用例如GreaseMonkey for Firefox 或TamperMonkey for Chrome 注入相同的代码。这足以让它成为一个“通用工具”。

【讨论】：

有没有办法在没有 javascript 的情况下做到这一点？我的时事通讯提供商允许我从任何位置复制 HTML 并将其粘贴，自动添加正确的计算样式（如我在上面指定的）。
Something 需要将计算出的样式复制到内联样式中才能进行导出。最可能的候选者是 Javascript。但是，您的问题非常不清楚您对“专用工具”的含义以及您到底要解决什么问题（您询问的是预定义的解决方案）。
我不清楚是我的错，我想我的意思是“有什么地方可以粘贴一段 html 并获取内联样式吗？”还是我必须自己建造？（这是一个有效的答案）
那么在这种情况下，答案就是：不，浏览器默认情况下不会将它们放在剪贴板上，除非某种浏览器本地代码在那里强制执行它:)

【解决方案2】：

如果您想复制 HTML 和 CSS，您可以转到 HTML 面板，通过“复制 HTML”复制 HTML，然后切换到 CSS 面板，启用源编辑模式，全选并从那里复制。

如果您需要提取与某个元素关联的所有 CSS，我建议您使用 Chrome 扩展程序SnappySnippet。

【讨论】：

SnappySnippet 看起来很有趣，但它没有在 HTML 中嵌入样式。发送 HTML 电子邮件时需要嵌入样式。

【解决方案3】：

当前的某些浏览器支持将clipboardData 属性作为粘贴事件的一部分。这应该允许您查询从剪贴板上的当前数据创建的不同数据格式。 Safari 和 Chrome 有最好的支持，但仍然不完整。如果您使用 XPCOM 对象接口打折，Firefox 不支持。 IE 界面较旧，仅支持文本或 URL 数据。

Using `clipboardData` property

【讨论】：

【解决方案4】：

你可以使用名为httrack的软件下载整个页面、站点、html/css/js或所需的html代码

【讨论】：

【解决方案5】：

根据您的问题判断，您需要一个提供特定功能的工具，就像ckeditor。

Here你可以测试它的演示，看看它是否符合你的需要。您可以粘贴文本并单击源以查看样式。

它几乎是一个插件，您可以放入任何页面并在您的页面上执行此操作。我用它把一些打字员相关的工作转移到行政部门，因为允许他们复制整个详细和结构化的描述。它还允许复制整个页面并将其粘贴到文本框中，然后将其存储在某个地方并在其他地方使用。

CMS 明智，它是一个很好的编辑器。 SEO 明智的，不是那么多，因为它将样式复制为内联 css。

免责声明：我没有制作它，但我认为它很有用。而且我从来没有找到模仿它的功能的东西。

【讨论】：

Using clipboardData property

Using `clipboardData` property