多航羽毛

Question

我有个关于“鸟羽”整合的问题。在我的javascript中，我需要使用这样的羽毛：

// Aviary init
var featherProductEditor = new Aviary.Feather({
  apiKey: 'myapykey',
  apiVersion: 3,
  theme: 'dark',
  tools: 'all',
  appendTo: '',
  onSave: function(imageID, newURL) {
    // Do things for featherProductEditor
    console.log('featherProductEditor');
    // Close the editor
    featherProductEditor.close();
  }
});

// Aviary init
var featherContentBlockEditor = new Aviary.Feather({
  apiKey: 'myapykey',
  apiVersion: 3,
  theme: 'light',
  tools: 'all',
  appendTo: '',
  onSave: function(imageID, newURL) {
    // Do things for featherContentBlockEditor
    console.log('featherContentBlockEditor');
    // Close the editor
    featherContentBlockEditor.close();
  }
});

然后我叫那两个羽毛

featherProductEditor.launch({ ....

和

featherContentBlockEditor.launch({ ....

但是唯一被调用的"onSave*“回调是第二个变量

为什么？我怎么才能解决这个问题？

Answer 1

关于您的第一个问题，为什么只调用第二个onSave ?

在内部，Aviary将羽毛配置存储在AV.launchData中，而AV是Aviary全局变量的别名。这是来自Aviary.Feather函数的代码片段：

AV.Feather = function (config) {
    ...
    AV.launchData = AV.util.extend(AV.baseConfig, config);
    ...
}

因此，这意味着featherContentBlockEditor的配置将覆盖featherProductEditor的配置。

您可以在创建每个羽毛之后添加AV.launchData.onSave()来验证这一点。

关于你的第二个问题，我如何解决这个问题?

不，你必须侵入SDK。这就是Aviary的工作方式，每个页面只定义一个Aviary.Feather实例。

Answer 2

你怎么能解决它？

您可以使用imageID来标识生成onSave事件的Aviary实例。

  onSave: function(imageID, newURL) {
    if(imageID === 'productImg') {
      // Do things for featherFeatureEditor
      console.log('featherProductEditor');
    } else {
      // Do things for featherContentBlockEditor
      console.log('featherContentBlockEditor');
    }
    // Close the editor
    featherContentBlockEditor.close();
  }

使用image:'productImg'作为发布信息以获取您的产品形象。

Answer 3

您只能在给定的页面上拥有Aviary编辑器的一个实例，但是您可以通过调用：

  editor.close(true); // passing true forces an immediate close without triggering shutdown animation
  editor.launch({ image: new_id, url: new_url });