65.9K
CodeProject 正在变化。 阅读更多。
Home

从 Internet Explorer 将 HTML 复制到剪贴板

蜜蜂大师
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.70/5 (21投票s)

2004年5月23日

4分钟阅读

viewsIcon

193064

downloadIcon

1809

一种简单的变通方法，可以通过上下文菜单从 Internet Explorer 中将选定文本的 HTML 源复制到剪贴板。

Right-click on selected text and select Copy as HTML from the menu

引言

这种简单的变通方法在 Internet Explorer 中提供了一个额外的上下文菜单选项“复制为 HTML”，可以将选定的文本范围连同 HTML 源一起复制到剪贴板。

例如，在上面的例子中，复制会将以下内容放入剪贴板

Welcome to The Code Project.
Your place for 6,636 free C++, C# and .NET articles, code snippets, discussions, 
news and the best bunch of developers on the net.

而复制为 HTML 会将以下内容放入剪贴板

<DIV style="MARGIN-TOP: 7px; FONT-SIZE: 13pt; COLOR: #ff9900">
<B>Welcome to The Code Project.</B></DIV>
<DIV>Your place for <A href="/script/articles/sections.asp"><B>6,636</B></A> 
free C++, C# and .NET articles, code snippets, discussions, 
news and the best bunch of developers on the net.
</DIV>

背景

Microsoft Visual Studio 的 HTML 编辑器有一个功能，当您从 Internet Explorer 将文本复制到剪贴板时，文本有两种版本可用：HTML 版本和文本版本。HTML 版本使用 HTML 转义序列来表示特殊字符，如 <、> 和引号。

例如，如果您复制了“<MARQUEE>”到剪贴板

  • HTML 版本将是“&lt;MARQUEE&gt;”。
  • 文本版本将是“<MARQUEE>”。

粘贴时，您可以从右键菜单中选择以下任一选项

  • 要粘贴 HTML 版本，请选择粘贴。
  • 要粘贴文本版本，请选择粘贴为 HTML。

这是一个很棒的功能，尽管它有点令人困惑，因为我一直认为粘贴应该粘贴文本版本，而粘贴为 HTML 应该粘贴带有 HTML 标签的文本。无论如何，如果此功能以“复制为 HTML”选项的形式在 Internet Explorer 中可用，那就太好了。这样，HTML 就可以直接粘贴到任何文本编辑器甚至 Microsoft Visual Studio 的源文件中，而不仅仅是 HTML 编辑器。

但遗憾的是，情况并非如此。目前，要复制 HTML 源，必须查看网页的源代码并搜索所需的文本内容，然后选择并复制 HTML 源到剪贴板。

解决方案

该解决方案只需要三行简单的代码。

     // Get the selected Html source of the window object
     // where the context menu item was executed
     var selectedHtml=(document.selection.createRange()).htmlText;
     // Set the clipboard with selected HTML, if there is any
     if(selectedHtml!= "")
         window.clipboardData.setData("Text",selectedHtml);

第一行从当前文本选择中检索 TextRange 对象的 HTML 源。这里有一个要注意的地方。htmlText 属性将检索作为有效 HTML 片段的 HTML。这意味着它会自己关闭所选范围内未关闭的 HTML 标签。但这很好，因为我们不必担心关闭所有打开的标签。

接下来的两行将选定的 HTML（如果存在）以文本格式分配给 clipboardData 对象。

这三行代码可以包含在任何 Web 应用程序中，以提供将文本复制到客户端剪贴板的选项。但我想让此功能在浏览器上下文菜单中可用。这就是 CodeProject 上 aalo 的一篇文章，它帮助我了解如何通过在注册表中放置条目并将它们链接到执行脚本的 URL 来将项目添加到 WebBrowser 控件现有的上下文菜单中。

以下注册表条目将一个名为“复制为 HTML”的项添加到标准的 WebBrowser 控件的上下文菜单中

HKEY_CURRENT_USER
        Software
            Microsoft
                Internet Explorer
                    MenuExt
                        Copy as &HTML = "file://C:\\CopyAsHtml.js"

上面的键表示，在选择菜单选项时，它将执行位于 C 驱动器根目录中的 CopyAsHtml.js 文件中包含的内联脚本。键名中 HTML 前面的 ampersand (&) 将导致“H”被划线。

内联脚本文件使用 external.menuArguments 来引用执行上下文菜单项的窗口对象。因此，上面的三行代码在 CopyAsHtml.js 文件中将变为如下形式

    // Get the selected Html source of the window object
    // where the context menu item was executed
    var selectedHtml=
      (external.menuArguments.document.selection.createRange()).htmlText;
   
    // Set the clipboard with selected HTML
    if(selectedHtml!= "")
        external.menuArguments.clipboardData.setData("Text",selectedHtml);

安装

安装步骤

  • 下载 zip 文件。
  • 关闭所有浏览器窗口。
  • 将 CopyAsHtml.js 文件复制到 C 驱动器的根目录。
  • 双击 CopyAsHtml.reg。这将在注册表中创建一个“复制为 HTML”条目，以在上下文菜单下创建菜单项。

注意：如果您选择将 CopyAsHtml.js 文件复制到 C 驱动器根目录以外的任何文件夹，请在运行 CopyAsHtml.reg 文件之前，修改 CopyAsHtml.reg 中的以下行以指向相应的文件夹。

@="file://C:\\CopyAsHtml.js"

Uninstall

卸载步骤

  • 关闭所有浏览器窗口。
  • 通过单击“开始”，然后单击“运行”，输入 regedit，然后单击“确定”来打开注册表编辑器。
  • 关闭所有浏览器窗口。
  • 导航到以下注册表项
    HKEY_CURRENT_USER --> Software -->
    Microsoft --> Internet Explorer --> MenuExt
  • 删除“复制为 &HTML”键。

已知问题

一些已知问题

  • 正如标题所示，它仅在 Internet Explorer 中有效。
  • 某些特殊 HTML 代码在复制到剪贴板时不会被转义。例如，© 不会被转义为 &copy;
  • 如前所述，剪贴板数据存储为有效的 HTML 片段。

摘要

这个简单的变通方法可以更轻松地快速复制网页的某些部分及其所有格式。欢迎提出任何建议、问题或评论。

参考文献

历史

版本 1.0 - 首次发布。

© . All rights reserved.