我们如何使用 javascript 将剪贴板中的图像粘贴到自定义富文本编辑器中？ （ctrl+c 和 ctrl+v 或快照）。
有人用过 Ajax 的富文本编辑器吗？将图像从剪贴板粘贴到 Ajax RTE 是否有效？
请分享你的想法！
谢谢！
【问题讨论】：
标签： javascript clipboard copy-paste
现在我找到了clipboardData Object。
但它只从剪贴板检索文本格式或 URL。
clipboardData 仅适用于 IE，它适用于字符串，如果我们粘贴图像则返回 null。
一个测试示例
<form>
<input type="text" id="context" onClick="paste();">
</form>
<script type="text/javascript">
function paste() {
var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;
}
</script>
默认情况下，Firefox 不启用剪贴板访问，说明 here。 另一方面，execCommand() 只处理文本值，不兼容 Firefox。
正如其他人所说，代码在 IE 上运行的事实存在安全风险，任何网站都可以访问您的剪贴板文本。
复制图像相对 URL 的最简单方法是使用 java 小程序、windows activeX 插件、.net code 或拖放它。
【讨论】：
很遗憾，无法将剪贴板中的图像粘贴到 RTE。
如果您从 Microsoft Word 等桌面应用程序复制包含图像和一些文本的 blob，图像将显示为损坏的参考（尽管比例正确）并且文本将正确粘贴（格式将丢失）。
唯一可能的做法是在 RTE 中复制图像并粘贴回 RTE。
【讨论】：
新的浏览器，如 Firefox 4，支持将图像数据从剪贴板粘贴到 RTE 中作为Data URI with encoded PNG Data。但是，大多数 Web 应用程序错误地解析这些数据 URI 并将其丢弃。雅虎邮件正确处理。但是 Gmail 和 Hotmail 会丢弃它。我已就此通知 Google 和 Microsoft。
【讨论】：
因为这个问题仍然经常出现在 Google 的搜索结果中，所以我想指出这在今天是可能的，至少在 Google Chrome（2011）中在所有现代浏览器（2018 年）中都是可能的。他们实现了它以在 GMail 中使用，但它适用于所有网站。
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
【讨论】：
这在 Chrome 和 Firefox 中绝对是可能的。我不太确定 IE/Safari。
以 imgur.com、onpaste 和 pasteboard.co 为例，查看 code for pasteboard on github 和 Joel's excellent write up on his blog
作为记录，您需要用户在您的元素上按 Ctrl+V，然后您可以通过读取 event.clipboardData 来捕获 paste 事件处理程序中的数据，但要使其正常工作在下层，您需要确保焦点位于空的 contenteditable 元素上，然后从那里提取结果，这在 Firefox 22 中效果不佳。请参阅here
【讨论】：
为了帮助其他人，我将在此处留下由 Nick Rattalack 回答的链接
// window.addEventListener('paste', ... or
document.onpaste = function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)}; // data url!
reader.readAsDataURL(blob);
}
}
}
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
【讨论】：
url.createObjectURL 以某种方式仅创建一个在该会话中工作的 URL，而不是用于存储在数据库中。 FileReader() 非常适合 base64 图像。
XMLHttpRequest 将 blob 存储在数据库中，而无需使用任何 FileReader。您还可以以相同的方式将任何 URI（包括 URL）存储在数据库中，并且使用 data 方案存储 URI 实际上将存储资源本身（因为这就是 data URI 的工作方式）。您要描述的是，通过调用 URL.createObjectURL 获得的 URL 只能在特定的“会话”（取决于用户代理）内工作，使其在该会话之外毫无意义，例如在发出将某些资源存储在数据库中的请求时。