正确关闭Adobe Creative Cloud Web SDK

Question

我们已经使用 Creative Cloud Web SDK 结合 AngularJS 创建了一个单页应用程序。现在我们遇到一个问题，即使编辑器被删除并且 state/view（我们正在使用 UI-Router）已被更改，对编辑器元素的引用似乎仍然存在于页面中.如果应用程序随后重新启动编辑器，它会创建新的 DOM 对象和事件侦听器。编辑器中内置的 .close() 函数似乎只是隐藏了编辑器，实际上并没有将其删除。

有没有办法正确关闭编辑器，以便它可以在同一页面上安全地重新启动，而不会由于 DOM 个对象的数量增加而导致内存泄漏？

也许将编辑器的元素保留在页面上，但不管发生的其他所有事情都将其隐藏？这样它就不会在每次需要启动时都创建一个新的编辑器。

感谢您的宝贵时间。

Answer 1

图像编辑器不应在每次启动时创建新的 DOM 元素，因此我们可能需要查看一些代码才能弄清楚在这种情况下发生了什么。

示例回购

我有一个simple demo repo using Angular, UI Router, and the Creative SDK Image Editor.

除了自述文件中的步骤外，您还需要转到 server/index.html 并取消注释 <navbar> 指令。

UI

当你运行应用程序时，你会看到这个（图片下方的解释）：

注意： 导航栏本身，在这种情况下，与预期的演示无关，但会演示 UI 路由器和图像编辑器共存。

导航栏中的链接是 UI 路由器状态（ui-sref=home 和 ui-sref=modules）。

"Edit Image" 按钮启动 Creative SDK 的图像编辑器。您可以在 /client/pre-build/home/.

中找到相关代码

DOM

图像编辑器包含在 div 中，ID 为 avpw_holder。

以下是您将在 Chrome Devtools 中看到的此回购的原始状态：

<html lang="en">
<head></head>

<body ng-app="Meaniscule" class="ng-scope">
    <navbar>...</navbar> 
    <!-- uiView:  -->
    <div ui-view="" class="container ng-scope">...</div>
    <div id="avpw_holder">...</div>
</body>
</html>

启动和关闭图像编辑器将切换一些处理图像编辑器可见性的类，但不会在 DOM 中创建图像编辑器的新实例。

即使切换状态也是如此：

正确关闭Adobe Creative Cloud Web SDK

Closing Adobe's Creative Cloud Web SDK Properly

image-editor

aviary

angularjs

creative-cloud

adobecreativesdk

示例回购

UI

DOM