我们如何使用 javascript 将剪贴板中的图像粘贴到自定义富文本编辑器中?(ctrl+c 和 ctrl+v 或快照)。
有人用过 Ajax 的富文本编辑器吗?将图像从剪贴板粘贴到 Ajax RTE 是否有效?
请分享您的想法!
谢谢!
我们如何使用 javascript 将剪贴板中的图像粘贴到自定义富文本编辑器中?(ctrl+c 和 ctrl+v 或快照)。
有人用过 Ajax 的富文本编辑器吗?将图像从剪贴板粘贴到 Ajax RTE 是否有效?
请分享您的想法!
谢谢!
因为这个问题仍然经常出现在谷歌的搜索结果中,我想指出这在今天是可能的,至少在所有现代浏览器(2018)中的谷歌浏览器(2011)中是可能的。他们实现了它以在 GMail 中使用,但它可用于所有网站。
为了帮助其他人,我将在此处留下链接,其中包含 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);
}
}
}
现在在 Chrome 和 Firefox 中这绝对是可能的。我对 IE/Safari 不太确定。
以 imgur.com、onpaste 和 pasteboard.co 为例,并在 github 上查看 pasteboard 的代码以及Joel 在他的博客上的优秀文章
为了记录,您需要用户在您的元素上按 Ctrl+V,然后您可以通过读取来捕获粘贴事件处理程序中的数据,event.clipboardData
但要使其在下层工作,您需要确保焦点位于空的contenteditable元素,并从那里拉出结果,这在 Firefox 22 中效果不佳。请参见此处
新的浏览器,如 Firefox 4,支持将图像数据从剪贴板粘贴到 RTE 作为带有编码 PNG 数据的数据 URI。但是,大多数 Web 应用程序错误地解析这些数据 URI 并将其丢弃。雅虎邮件正确处理。但是 Gmail 和 Hotmail 丢弃了它。我已经通知了谷歌和微软这件事。
现在我找到了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 上未启用剪贴板访问,请在此处解释。另一方面,execCommand()只处理文本值并且不兼容 Firefox。
就像其他人所说的,代码在 IE 上运行的事实存在安全风险,任何站点都可以访问您的剪贴板文本。
复制图像相对 URL 的最简单方法是使用 java 小程序、windows activeX 插件、.net 代码或拖放它。