javascript - 在没有对话框的情况下启动 Avairy（在 div 内）

Question

我需要在我自己的自定义对话框中使用 Avairy（来自 Adob​​e Creative SDK，Web 版本）。

有什么办法可以让 Aairy 的 div 代替对话框？我将把它放在我自己的对话框中。

主要问题是方法 avairyEditor.launch() 打开一个对话框，我看不到做其他事情的简单方法。

是否有唯一的方法可以编写我自己的 hack（不可见的显示对话框并从中删除 div）或者我可以做到几乎不流血？

Answer 1

是的，您需要在配置中使用 appendTo 选项。

您的 HTML：

<!-- Aviary div container. You can use absolute/relative positioning -->
<div id='aviary' style='width:600px;height:400px;'></div>

<!-- Add an edit button, passing the HTML id of the image
    and the public URL to the image -->
<a href="#" onclick="return launchEditor('editableimage1', 
    'http://example.com/public/images/goat.jpg');">Edit!</a>

<!-- original line of HTML here: -->
<img id="editableimage1" src="http://example.com/public/images/goat.jpg"/>

你的 JavaScript：

var featherEditor = new Aviary.Feather({
    apiKey: '1234567',
    appendTo: 'aviary'
    onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
    }
});

function launchEditor(id, src) {
    featherEditor.launch({
        image: id,
        url: src
    });
    return false;
}

文档：

https://creativesdk.adobe.com/docs/web/#/articles/gettingstarted/index.html#constructor-config-appendTo

Answer 2

为了更接近您想要做的事情appendTo，除了以下属性之外，请考虑使用 Juangui 提到的属性：

theme: 'minimum',
noCloseButton: 'true'

之后，您可以添加一些自定义样式以更好地匹配应用程序的其余部分。