我们如何使用javascript将剪贴板中的图像粘贴到自定义富文本编辑器中? (ctrl + c和ctrl + v或快照)。
有没有人使用过Ajax的富文本编辑器?将图像从剪贴板粘贴到Ajax RTE是否有效?
请分享你的想法!
谢谢!
答案 0 :(得分:30)
因为这个问题仍然经常出现在Google的搜索结果中,所以我想指出今天可能会出现这种情况,至少在Google Chrome(2011)中所有现代浏览器中都会出现(2018)。他们将其实施用于GMail,但它适用于所有网站。
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
答案 1 :(得分:13)
这在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
来捕获粘贴事件处理程序中的数据,但要制作它在低级别工作,你需要确保关注一个空的 contenteditable 元素,并从那里拉取结果,这在Firefox 22中不能很好地工作。请参阅here < / p>
答案 2 :(得分:10)
现在我找到了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 applet,windows activeX插件,.net code或拖放它。
答案 3 :(得分:10)
新浏览器(如Firefox 4)支持将剪贴板中的图像数据粘贴到RTE Data URI with encoded PNG Data。但是,大多数Web应用程序错误地解析这些数据URI并将其丢弃。 Yahoo邮件正确处理。但Gmail和Hotmail会丢弃它。我已经通知谷歌和微软。
答案 4 :(得分:3)
为帮助他人,我将在此处留下链接,其中包含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+?
答案 5 :(得分:1)
不幸的是,无法将剪贴板中的图像粘贴到RTE。
如果从包含图像和某些文本的Microsoft Word等桌面应用程序复制blob,图像将显示为损坏的引用(虽然比例将是正确的)并且文本将被正确粘贴(格式化将迷路了。
唯一可能的是在RTE中复制图像并在RTE中粘贴回来。