使用Javascript将样式文本从页面复制到剪贴板 [英] Copying styled text from a page to the clipboard with Javascript

问题描述

我创建了一个简单的工具，以便员工可以个性化其公司电子邮件签名.该工具创建带有一些加粗字体和一些颜色的样式化文本，没有花哨的地方.如果然后选择文本，然后将其复制并粘贴到我的Gmail签名字段中，则一切正常.它保留格式.但是，我希望为用户提供一个选项，即单击复制"按钮，将已格式化的内容复制到剪贴板上.

I've created a simple tool so employees can personalize their company email signature. This tool creates some styled text with some bolded fonts and a bit of color, nothing fancy. If I then select the text and copy and paste it into my Gmail signature field all works well. It retains the formatting. However, I'd prefer to give the user the option of clicking a "Copy" button that copies the formatted content onto their clipboard.

我目前正在使用ZeroClipboard添加复制到剪贴板"功能，并且效果很好.我不知道如何获取格式化的文本.它只是继续复制未格式化的版本.我尝试做的一件事是向ZeroClipboard添加mouseDown侦听器，以选择如下所示的文本:

I'm currently using ZeroClipboard to add the "copy to clipboard" functionality and it's working great. Thing is I don't know how to grab that formatted text. It just keeps copying the unformatted version. One thing I tried was adding a mouseDown listener to ZeroClipboard that selects the text like this:

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);
    }
}

然后返回选择内容，如下所示:

Then returns the selection like this:

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;
        }
    }
}

但是，这只是复制未格式化的文本.可以复制格式化的文本吗?

However, this is only copying the unformatted text. Is it possible to copy the text formatted?

我的格式化文本在id为结果"的div中.

My formatted text is in a div with the id "results".

推荐答案

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

If you want an HTML string representing the current selection, the following function will do this (replacing your getText() function):

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;
}

这篇关于使用Javascript将样式文本从页面复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！