我想使用 Apps Script AddOn 处理 Google Docs 的 ondrop
事件。
我可以看到 Google Docs 提供了拖放功能,我们可以通过它轻松地将图像从 images.google.com 拖到 google doc。我想通过我正在开发的 AddOn 来处理这个掉落事件。
尝试找到一些内置的方法来处理放置事件,但谷歌目前还没有提供。我曾尝试过很多其他方法,如 HTML5 DnD 等,但由于插件呈现为 iframe,因此无法访问 doc html。 window.parent
没有帮助。
我们将不胜感激
最佳答案
我在使用拖放 API 时没有遇到同样的问题。这可能与确保设置 <base target="_top">
有关。 .下面的脚本是用谷歌文档编写的。只需从 google images 中拖出一张图片,它就会显示在对话框中。
代码.gs
function onOpen() {
var menu = DocumentApp.getUi().createMenu("Get Image");
menu.addItem("Open Dialog", "openDialog").addToUi();
}
function openDialog(){
var html = HtmlService.createHtmlOutputFromFile('index');
DocumentApp.getUi().showModelessDialog(html, "drag n drop")
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
span {
display: inline-block;
}
img {
width: 100%;
}
</style>
</head>
<body>
Drag Image Here<br>
<span><img id="img" heigth=></span>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).on('dragover', function(e) {e.preventDefault();return false;});
$(document).on('drop', function(e) {
e.preventDefault();
e.originalEvent.dataTransfer.items[0].getAsString(function(url){
var parser = document.createElement('a');
parser.href = url;
if(parser.hostname === "www.google.com"){
var src = parser.search.split("?")[1].split("&")[0].split("=")[1];
$("#img").attr("src",src);
}else{
alert("please select an image from google images")
}
});
});
</script>
</html>
关于html - 使用 Google Doc AddOn 的 Apps 脚本处理 'drop' 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34211607/