如何使用JavaScript将富文本内容复制到剪贴板
How can I copy rich text contents to the clipboard with JavaScript?
前提
我需要使用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>
问题
上述代码不起作用,导致object expected error
。感谢您的帮助!我见过一个名为zeroclipboard
的库,但我更愿意编写自己的函数。
编辑:
我现在有了这个功能来选择页面上的文本。是否可以编写一个公式来原样复制所选范围?
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>
对于现代浏览器,如果您只想复制富文本,有一个非常简单的解决方案,而不需要使用任何包。看见http://jsfiddle.net/jdhenckel/km7prgv4/3
这是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>
功能
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);
};
⚠️ClipboardEvent.clipboardData是一项实验性技术。查看MDN(05-03-21(中的浏览器兼容性表
这个小小的JS插件在不使用Flash的情况下复制richtext:https://www.npmjs.com/package/clipboard-js
它基于https://clipboardjs.com/-但在我看来,这是一个升级,因为原文只支持纯文本。
代码很简单:
clipboard.copy({
"text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});
下面是我使用新的剪贴板API测试的一个示例:
const content = '<a href="http://google.com/">test</a>';
const blob = new Blob([content], {type: 'text/html'});
const clipboardItem = new window.ClipboardItem({ 'text/html': blob });
navigator.clipboard.write([clipboardItem]);
使用此方法,可以将html复制到剪贴板。需要注意的一件有用的事情是,这可以包括图像(可以是dataURL(。这是我发现的将多个图像粘贴到剪贴板的唯一方法。
Document.excCommand((显然已经过时了:
参考编号:https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand),
有一个新的剪贴板API:
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
这里有一些例子https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
还有这里:https://web.dev/async-clipboard/
这是一个旧的基于Flash的解决方案。由于Flash已停产,因此不应再在生产环境中使用它。
https://github.com/zeroclipboard/zeroclipboard
我搜索了一周终于找到了答案!!!对于那些想用javascript将富文本复制到剪贴板的人来说,使用下面链接中的函数,效果就像一个魅力。不需要闪光灯和其他建议的东西:(
使用JavaScript/jquery 将图像复制到剪贴板
- 零剪贴板复制文本后切换页面
- 复制到剪贴板在safari-angularjs中不起作用
- 使用javascript代码将HTML元素复制到剪贴板
- “复制到剪贴板”不起作用
- 使用jQuery/Javascript将忽略表头的表的内容复制到剪贴板
- javascript中的复制到剪贴板功能
- 将属性模型复制到剪贴板
- WinJs 复制到 Windows Phone 的剪贴板
- JavaScript 自动将文本复制到剪贴板
- 只能在第二次单击时将副本复制到剪贴板
- 复制到剪贴板是't工作
- c#在浏览器SharePoint中将文本框的内容复制到剪贴板
- 如何使用jquery将多个按钮ID复制到剪贴板
- 复制到剪贴板在firefox25中不起作用
- jQuery zClip 不会将值复制到剪贴板
- 为什么一个值没有在javascript中复制到剪贴板
- 如何在Webkit中将基于画布的图形复制到剪贴板
- 如何在使用之前检测复制到剪贴板的功能
- AppJs 键盘快捷键(复制、粘贴、剪贴板、退出、全选...
- 如何编辑此代码HTML/CSS以使'选择'JS代码也复制2剪贴板