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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23934656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:50:21  来源:igfitidea点击:

javascript copy rich text contents to clipboard

javascripthtmlclipboard

提问by marv

Premise

前提

I need help copying rich text to the clipboard using JavaScript. I have searched around and haven't found anything to suit my specific needs.

我需要帮助使用 JavaScript 将富文本复制到剪贴板。我四处搜索,没有找到任何适合我特定需求的东西。

Code

代码

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>

Problem

问题

The aforementioned code isn't working and is resulting in an object expected error. Any help is appreciated! I have seen a library out there called zeroclipboard, but would prefer to write my own function.

上述代码不起作用,并导致object expected error. 任何帮助表示赞赏!我见过一个名为 的库zeroclipboard,但更愿意编写自己的函数。



Edit:

编辑:

I now have this function to select text on the page. is it possible to write a formula to copy the selected range as is?

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

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);
  }
}
<label onclick="containerSelect(this); select_all()">
  <p>hello world</p>
  <img src="imagepath.png">
</label>

采纳答案by marv

i searched for a week now and finally found my answer!!! for those of you looking to copy rich text to the clipboard with javascript, then use the function at the link below, works like a charm. no need of flash and other stuff suggested :)

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

Copying an image to clipboard using JavaScript/jquery

使用 JavaScript/jquery 将图像复制到剪贴板

回答by John Henckel

With modern browsers, if you want copy rich textonly, there is a very easy solution without using any packages. See http://jsfiddle.net/jdhenckel/km7prgv4/3

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

Here is the source code from the fiddle

这是小提琴的源代码

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

the function

功能

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

回答by SFlagg

This tiny JS plugin copies richtext without using Flash: https://www.npmjs.com/package/clipboard-js

这个小小的 JS 插件无需使用 Flash 即可复制富文本:https: //www.npmjs.com/package/clipboard-js

It's based on https://clipboardjs.com/- but it's an upgrade in my opinion, because the original only supports plain text.

它基于https://clipboardjs.com/- 但在我看来它是一个升级,因为原来只支持纯文本。

The code is simple:

代码很简单:

clipboard.copy({
    "text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});

回答by James Harrington

Well here is the deal most modern web browsers wont let you have access to the clip board. However like with everything there is a work around.

好吧,这是大多数现代网络浏览器不会让您访问剪贴板的交易。然而,就像所有事情一样,有一个解决方法。

https://github.com/zeroclipboard/zeroclipboard

https://github.com/zeroclipboard/zeroclipboard

this is a js/flash plugin that lets you copy text to your clipboard.
(i believe you can use it for rich text.)

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