문제 설명
대화 상자 없이 Avairy 실행(div 내부) (Launch Avairy without a dialog (inside div))
내 사용자 정의 대화 상자 내에서 Avairy(Adobe Creative SDK, 웹 버전)를 사용해야 합니다.
대화 상자 대신 Avairy의 div를 가져올 수 있는 방법이 있습니까? 내 자신의 대화 상자 안에 배치하겠습니다.
주요 문제는 avairyEditor.launch() 메서드가 대화 상자를 열고 다른 작업을 수행할 수 있는 간단한 방법이 없다는 것입니다.
은 내 자신의 핵을 작성하는 유일한 방법(대화 상자를 표시하고 div를 자르지 않음)을 작성하거나 피를 거의 흘리지 않도록 할 수 있습니까?
참조 솔루션
방법 1:
Yes, you need to use the appendTo option in the configuration.
Your 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"/>
Your 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;
}
Documentation:
방법 2:
To get closer to what you are trying to do, consider using the appendTo property, as mentioned by Juangui, in addition to the following properties:
theme: 'minimum',
noCloseButton: 'true'
After that you can add some custom styling to better match the rest of your app.
(by Komi Dumity、Juangui Jordán、Ash Ryan Arnwine)