将页面的 HTML 片段复制到剪贴板

Question

我正在开发 Web 开发工具，我想使用 Javascript 将当前网页的一部分 HTML 代码复制到剪贴板。

这可能会涉及

• 使用 DOM innerHTML 获取问题中的 HTML 片段

• 使用 Javascript 将此文本复制到剪贴板

有人知道这里有什么陷阱吗？例如。与剪贴板处理相关 - 当不使用 documentEditable 模式时，我是否需要创建一个隐藏的位置来放置 HTML 有效负载以进行复制？

如果可能的话，我还想与所见即所得组件（如 TinyMCE）进行交互，以便在可视化编辑模式下粘贴 HTML 时，它会以格式化的 HTML 而不是纯文本的形式出现。

如果解决方案适用于 Chrome 和 Firefox 就足够了。不需要支持 Internet Explorer。

Answer 1

Javascript 无法将内容添加到剪贴板。好吧，至少不是任何跨浏览器的。

不过，有一个运行良好的闪存解决方案。 http://code.google.com/p/zeroclipboard/

Answer 2

我们开发了一个小型 Firefox-AddOn，用于在从编辑器复制/粘贴内容时删除特殊字符（连字符）。这是必要的，因为没有 javascript 方法可以将任何内容填充到剪贴板中。我想也应该可以为 Chrome 编写扩展程序（googel 是你的朋友）。从我的角度来看，这似乎是获得您想要的东西的唯一方法。

示例： 这是 FireFox-Addon 删除特殊字符 onCopy 所需的代码 sn-p

// get Clipboard Object
var clip  = Components.classes["@mozilla.org/widget/clipboard;1"].createInstance(Components.interfaces.nsIClipboard);

// get Transferable Object
    var tr_unicode = new Transferable(); 
var tr_html    = new Transferable();

// read "text/unicode flavors" (the clipboard has several "flavours" (html, plain text, ...))
    tr_unicode.addDataFlavor("text/unicode");
tr_html.addDataFlavor("text/html");
    clip.getData(tr_unicode, clip.kGlobalClipboard); // Systemclipboard
    clip.getData(tr_html, clip.kGlobalClipboard); // Systemclipboard

// generate objects to write the contents into (used for the clipboard)         
    var unicode = { }, ulen = { }, html = { }, hlen = { };

tr_html.getTransferData("text/html", html, hlen);
tr_unicode.getTransferData("text/unicode", unicode, ulen);

var unicode_obj = unicode.value.QueryInterface(Components.interfaces.nsISupportsString);
var html_obj    = html.value.QueryInterface(Components.interfaces.nsISupportsString);

// we remove Softhyphen and another control character here
var re = new RegExp('[\u200b' + String.fromCharCode(173)+ ']','g');

if (unicode_obj && html_obj)
{
    var unicode_str = unicode_obj.data.replace(re, '');
    var html_str    = html_obj.data.replace(re, '');

    // Neue Stringkomponenten für unicode und HTML-Content anlegen      
    var unicode_in = new StringComponent();
    unicode_in.data = unicode_str;

    var html_in = new StringComponent();
    html_in.data = html_str;

    // generate new transferable to write the data back to the clipboard
    // fill html + unicode flavors
    var tr_in = new Transferable();
    tr_in.setTransferData("text/html", html_in, html_in.data.length * 2);
    tr_in.setTransferData("text/unicode", unicode_in, unicode_in.data.length * 2);

    // copy content from transferable back to clipboard     
    clip.setData(tr_in, null, clip.kGlobalClipboard);
}