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

时间:2011-02-22 22:22:02

标签: 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中。

1 个答案:

答案 0 :(得分:2)

如果您想要一个表示当前选择的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;
}