我们如何使用javascript将剪贴板中的图像粘贴到自定义富文本编辑器中？(ctrl + c和ctrl + v或快照).
有没有人使用过Ajax的富文本编辑器？将图像从剪贴板粘贴到Ajax RTE是否有效？
请分享你的想法!
谢谢!
首先,我了解图像无法从本地计算机"复制"到网站中.我知道必须上传.我是一名网络程序员,熟悉常见的网络体验工具,如TinyMCE和FCKEditor.我的问题是,是否存在程序或网络模块或某种有效的东西将执行为所见即所得的图像的自动上传.我有一个客户经常抱怨无法将带有MS Word图像的文档复制/粘贴到所见即所得,以便在他们的网站上创建内容.
我已经查看了TX Text Control(http://labs.textcontrol.com/)并且正在研究一个可能在后台自动上传文件的flash wysiwyg.我不知道这是否存在,谷歌在我的搜索中没有太多帮助我,所以我想我会问其他编码员.
我对任何类型的服务器技术或浏览器要求持开放态度.我正在寻找一些基于浏览器的工具,而不是像Dreamweaver或其他应用程序工具.
如果没有解决问题的好方法,我愿意接受这一点.
注意:这是客户的要求,对我来说这似乎是不合理的.我决定收集社区建议而不是告诉客户"否",这里的选项对于提供可能的解决方案非常有帮助和信息.
html5 wysiwyg web-applications copy-paste clipboard-interaction
我正在尝试实现一个粘贴处理程序来从用户的剪贴板中获取图像.我希望这只能在Google Chrome上运行,我并不担心其他浏览器.
这是我在互联网上找到的一种方法的一部分,我正在努力调整它.
// Get the items from the clipboard
var items = e.clipboardData.items;
if (items) {
// Loop through all items, looking for any kind of image
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
// We need to represent the image as a file,
var blob = items[i].getAsFile();
// and use a URL or webkitURL (whichever is available to the browser)
// to create a temporary URL to the object
var …我试图让用户将图像粘贴到div.问题是我需要它在Firefox中工作.
根据我的阅读,自版本13以来的Firefox(我认为)不允许JavaScript访问剪贴板,并且event.clipboard不存在于剪贴板中.我知道它可以做到,因为Gmail和雅虎甚至在Firefox中也是如此.
我只是希望它无论如何都可以工作,使用jQuery,JavaScript,HTML5,只要它在最新的Firefox中工作就没关系.(虽然没有Flash).
我正在尝试使用标准例程向我的Web应用程序添加图像粘贴功能:
$('textarea').on('paste', function (ev) {
var clipboardData = ev.originalEvent.clipboardData;
$.each(clipboardData.items, function (i, item) {
if (item.type.indexOf("image") !== -1) {
var reader = new FileReader();
reader.readAsDataURL(item.getAsFile());
reader.addEventListener('loadend', ...);
...
}
});
});
完整的样本可以在这里找到:http://jsfiddle.net/t8t2zj6k/
当我从图像查看器软件复制并粘贴图像时,它可以正常工作,但是当我尝试使用文件浏览器(例如Mac上的Finder或Linux上的Nautilus)做同样的事情时,我只得到一个文本字符串使用文件路径甚至是带有文件类型图标的图像而不是原始文件.
有没有办法正确处理文件浏览器中的粘贴？
有人可以解释这个网站如何访问剪贴板的内容并显示它？
我正在开发一个类似的项目,需要利用这个功能,用户可以通过ctrl + v粘贴图像.此外,如果该网站使用的是Java插件,为什么我的Chrome不会弹出过时的警告？
任何帮助表示赞赏!
谢谢.
我目前正在构建一个非常简单的骨骼Web应用程序,它要求能够在浏览网页时复制图像,然后将其粘贴到我的页面上.
我知道这种类型的功能是可能的 - 因为我在写消息时将图像粘贴到gmail中,然后插入Tumblr(我相信他们使用TinyMCE作为编辑器).
经过长时间的搜索 - 我对可用解决方案的解释质量很差感到很难过.
这就是我收集的内容:
$(document).bind('paste', function(e){
console.log(e);
})
检查事件对象时,似乎只有在有文本时才会包含数据(无论如何都在Chrome中).
我知道IE有一个clipboardData对象,可以访问剪贴板内容.
我也听说过使用Flash,Java Applet和HTML 5 Canvas的可能解决方案 - 但我还没有找到解释这些解决方案的优秀文章.
任何人都成功完成了这项工作,并建议最佳做法？
我尝试制作类似于GMail使用的图像上传功能.您从桌面复制(CTRL-C)图像并将其粘贴(CTRL-V)到网站上.然后通过XMLHttpRequest将图像上传到处理传入文件的php脚本,其中"处理"意味着重命名并存储在服务器上.
我已经可以获取图像(和-data),但我无法成功提交和接收XMLHttpRequest.我的Javascript代码看起来像这样:
document.onpaste = function(e){
var items = e.clipboardData.items;
console.log(JSON.stringify(items));
if (e.clipboardData.items[1].kind === 'file') {
// get the blob
var imageFile = items[1].getAsFile();
console.log(imageFile);
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
submitFileForm(event.target.result, 'paste');
};
}
};
function submitFileForm(file, type) {
var formData = new FormData();
formData.append('file', file);
formData.append('submission-type', type);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'php/image-upload.php');
xhr.onload = function () {
if (xhr.status == 200) {
console.log('all done: ');
} else {
console.log('Nope');
} …我正在使用 ClipboardData API 将复制粘贴功能实现到浏览器应用程序中，如本答案中所述。
它FileReader::readAsDataURL(blob)提供了文件数据的异步读取，这很棒。
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
var reader = new FileReader();
reader.onload = function(event){
/*add item (i.e. image) to page*/}; //callback
var blob = items[0].getAsFile(); //not async
reader.readAsDataURL(blob); //async
问题：
1）有没有办法使DataTransferItem::getAsFile()方法异步？
2）有没有办法FileReader将 aDataTransferItem作为参数，以便它可以async像处理 blob 一样执行自身操作？
3）我运气不好吗？
我正在使用此处的代码将剪贴板中的图像粘贴到页面上。它适用于所有浏览器（Chrome、Firefox、Edge 和 Opera）。
问题是：当图像是带有 alpha 通道（透明区域）的 PNG 或 GIF 时，alpha 在 Firefox 和 Edge 中变为黑色。
这是代码片段（如果您愿意，也可以使用 jsfiddle）：
document.getElementById('pasteArea').onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load …我正在尝试按照这篇文章从剪贴板中的 javascript 获取图像：https : //stackoverflow.com/a/6338207/6188783
document.onpaste = function (event) {
console.log("paste triggered!");
console.log("text: " + event.clipboardData.getData("text")); // shows text if it was pasted
console.log("image: " + event.clipboardData.getData("image")); // always returns empty string p.s. I've also tried image/bmp and other formats
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 = …我看了很长时间才找到解决方案,但我找不到任何解决方案.是否有可能将图片从剪贴板上传到服务器上的文件(按ctrl + v)？它适用于Chrome.
使用PHP,Javascript,jquery,还是其他？铬的一些外部扩展？
非常感谢.
我正在使用Dart开发个人白板Chrome应用程序,有时能够快速复制和粘贴图像(例如演示文稿中的幻灯片,图表或讲义),以便我可以在图像上添加注释在教课或演讲时.
如何将存储在剪贴板上的图像粘贴到Dart中的画布元素上？