wordpress 小部件中的 Canva 按钮答案

【问题标题】：Canva button in wordpress widgetwordpress 小部件中的 Canva 按钮
【发布时间】：2015-07-13 12:50:01
【问题描述】：

我想在我的 wordpress 小部件中使用 canva 按钮。

当您创建画布按钮时，它们会向您提供代码，您可以将这些代码复制并粘贴到您的网站中，在我的例子中是小部件 UI。代码如下所示：

<span data-type="poster" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design a poster</span>

<script>(function(c,a,n){var w=c.createElement(a),s=c.getElementsByTagName(a)[0];w.src=n;s.parentNode.insertBefore(w,s);})(document,'script','https://sdk.canva.com/v1/api.js');</script>

Span 是按钮，javascript 将在 head 中包含一个 canva js 文件，该文件将为按钮设置样式并在其上添加点击事件。当你点击按钮时，你会弹出来创建一些设计。

这是demo 在前端放置canva 按钮时的样子。

这是我在小部件 UI 中如何使用它的屏幕截图：

问题是当我将小部件拖放到侧边栏中并且未显示画布弹出窗口时，单击事件不起作用。在侧边栏中拖放小部件后，我需要刷新页面才能使单击事件起作用。我猜这是因为 Widget 的 HTML 将附加到侧边栏，但点击事件已经添加。

有没有办法用一些javascript代码来处理它。需要说我无法更改 Canva javascript 文件，所以我需要使用我的 javascript 来完成它

【问题讨论】：

标签： javascript jquery wordpress

【解决方案1】：

data-api-key 由 canva 提供。示例一无效。

【讨论】：

要提供答案，请进一步解释该示例无效的原因以及如何解决它。例如，如果您认为可以解决问题，请说明如何设置 data-api-key（或者是否应该将其删除）
即使帖子很旧，恕我直言，它应该是 data-api-key，而不是 data-apikey 。这可能是个问题。
然而，你如何获得canva的API KEY呢？很多天前我试图找到它，但没有成功。