使用Javascript将样式文本从页面复制到剪贴板

Question

我创建了一个简单的工具，让员工可以个性化他们的公司电子邮件签名。这个工具创建了一些带有一些粗体字体和一些颜色的样式文本，没有什么花哨的。如果我然后选择文本并将其复制并粘贴到我的 Gmail 签名字段中，那么一切正常。它保留格式。但是，我更愿意让用户选择单击“复制”按钮，将格式化的内容复制到他们的剪贴板上。

我目前正在使用 ZeroClipboard 添加“复制到剪贴板”功能，效果很好。问题是我不知道如何获取格式化的文本。它只是不断复制未格式化的版本。我尝试的一件事是向 ZeroClipboard 添加一个 mouseDown 侦听器，它可以像这样选择文本：

function selectText() {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById('clicktocopy'));
        range.select();
    }
    else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById('clicktocopy'));
        window.getSelection().addRange(range);
    }
}

然后像这样返回选择：

function getText() {
    if (window.getSelection) {
        var range = window.getSelection();
        return range.toString();
    }
    else {
        if (document.selection.createRange) {
            var range = document.selection.createRange();
            return range.text;
        }
    }
}

但是，这只是复制未格式化的文本。是否可以复制格式化的文本？

我的格式化文本位于 id 为“results”的 div 中。

Answer 1

如果您想要一个表示当前选择的 HTML 字符串，以下函数将执行此操作（替换您的 getText() 函数）：

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}