Question

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

2011-02-22

3019

javascript html mootools

我创建了一个简单的工具，以便员工可以个性化他们的公司电子邮件签名。此工具会创建一些带有粗体字体和一些颜色的样式文本，没有什么特别的。如果我选择文本并将其复制并粘贴到我的 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;
}