javascript将富文本内容复制到剪贴板

时间:2014-05-29 13:33:55

标签: javascript html clipboard

前提

我需要帮助使用JavaScript将富文本复制到剪贴板。我四处搜寻,找不到符合我特定需求的东西。

代码



function ctrlA1(corp) {
  with(corp) {}
  if (document.all) {
    txt = corp.createTextRange()
    txt.execCommand("Copy")
  } else
    setTimeout("window.status=''", 5000)
}

<div id="sc1">hello <br> <b> world </b> </div>
<button onclick="ctrlA1(document.getElementById('sc1') )"></button>
&#13;
&#13;
&#13;

问题

上述代码无效,导致object expected error。任何帮助表示赞赏! 我在那里看到一个名为zeroclipboard的图书馆,但我更愿意编写自己的函数。


编辑:

我现在有了这个功能来选择页面上的文字。是否可以编写公式来按原样复制所选范围?

&#13;
&#13;
function containerSelect(id) {
  containerUnselect();
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(id);
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(id);
    window.getSelection().addRange(range);
  }
}
&#13;
<label onclick="containerSelect(this); select_all()">
  <p>hello world</p>
  <img src="imagepath.png">
</label>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:18)

对于现代浏览器,如果您只想要复制富文本,则可以使用非常简单的解决方案,而无需使用任何软件包。见http://jsfiddle.net/jdhenckel/km7prgv4/3

以下是小提琴的源代码

<button onclick="copyToClip(document.getElementById('foo').innerHTML)">
  Copy the stuff
  </button>

<div id=foo style="display:none">
  This is some data that is not visible. 
  You can write some JS to generate this data. 
  It can contain rich stuff.  <b> test </b> me <i> also </i>
  <span style="font: 12px consolas; color: green;">Hello world</span> 
  You can use setData to put TWO COPIES into the same clipboard, 
  one that is plain and one that is rich. 
  That way your users can paste into either a
  <ul>
    <li>plain text editor</li>
    <li>or into a rich text editor</li>
  </ul>
</div>

功能

function copyToClip(str) {
  function listener(e) {
    e.clipboardData.setData("text/html", str);
    e.clipboardData.setData("text/plain", str);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
};

答案 1 :(得分:8)

这个小小的JS插件可以复制richtext 而不使用Flash https://www.npmjs.com/package/clipboard-js

它基于https://clipboardjs.com/ - 但我认为它是升级版,因为原文只支持纯文本。

代码很简单:

var excludeIrelevant = function(str, excl){
     //logic to exclude the irelevant words fromt he string
     return theArrayOfRelevantStrings;
}
var countOccurences = function(str){
     //function that counts the occurences of each word in the relevantWords variable and retruns an array of objects of form [{'word':'the_word', 'count' : number_of_occurences}} 
     return theArrayOfWordCountObjects;
}
var relevantWordsList = excludeIrelevant(toBeChecked, toExclude);   
var countOfRelevantWords = countOccurences(relevantWordsList .join(' '));

答案 2 :(得分:1)

这就是大多数现代网络浏览器不会让您访问剪辑板的交易。然而,就像一切都有一个解决方案。

https://github.com/zeroclipboard/zeroclipboard

这是一个js / flash插件,可让您将文本复制到剪贴板。
(我相信你可以用它来制作富文本。)

答案 3 :(得分:1)

答案 4 :(得分:-2)

我现在搜索了一个星期,终于找到了答案! 对于那些希望用javascript将富文本复制到剪贴板的人,然后使用下面链接中的功能,就像一个魅力。 不需要闪光灯和其他建议的东西:)

Copying an image to clipboard using JavaScript/jquery