如何添加我自己的下拉菜单(popupMenu)，像编写器选项那样？

开发
1

我将以下代码添加到我的主题组件中，并期望在编辑器中出现一个新的 popupMenu。

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
      id: "align_center_button",
      group: "crud",
      icon: "align-center",
      popupMenu: true
  });
});

我以为我可以按照这里的代码，在添加 options 齿轮的地方添加代码，它就能工作。

        toolbar.addButton({
          id: "options",
          group: "extras",
          icon: "cog",
          title: "composer.options",
          sendAction: this.onExpandPopupMenuOptions.bind(this),
          popupMenu: true,
        });

image
image719×394 69.6 KB

我以为我可以创建带有 crud 组的附加按钮，并且它们会像默认选项一样显示在自己的下拉菜单中。这可能吗？你能提供一个如何设置和绑定选项到自己的 popupMenu 的示例吗？

2 个赞
2

我認為我們的 JavaScript 插件 API 目前無法輕鬆添加次級下拉菜單。我能想到的工具欄自定義都只是向現有下拉菜單添加選項。

要渲染某些內容，您需要將您的 group 更改為 "extras"。這些分組是硬編碼的，與編輯器按鈕的各個部分相關。

另一件需要注意的事情是，您選擇的 icon 需要通過您的主題組件或 svg icon subset 站點設置來添加。

除此之外，恐怕您正在進入一片相當未知的領域。

4 个赞
4

好的，这对于分组部分很有意义。

我已将组改回“extras”，现在它确实显示出来了，但它与现有的选项齿轮下拉菜单出现在同一个菜单中。

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
      id: "align_center_button",
      group: "extras",
      icon: "align-center",
      popupMenu: true
  });
});

这是否可以作为插件 API 的一个功能添加？能够将自定义项目添加到自己的下拉菜单中，而不受现有选项下拉菜单的影响。考虑到我们的编辑器随着我们想要添加的所有附加选项而开始显得有些混乱，我认为这会很有用 :slight_smile:

2 个赞
5

完全理解它可能有多么有用！我看到您打开了一个#feature主题，这很完美。这将帮助我们跟踪兴趣，并希望在未来某个时候实现它。

4 个赞
6

谢谢 @tshenry，我很感激你对此事的关注！

3 个赞