插件：从模态访问toolbarEvent

开发
1

我的插件在编辑器工具栏中插入了一个按钮。该工具栏会打开一个模态框，当模态框关闭时，我希望向帖子中添加文本。除了最后一步，其他一切正常，因为我难以让模态框访问编辑器。

如果将按钮放在工具栏的菜单下，一切正常：

      api.modifyClass("controller:composer", {
        pluginId: "discourse-n8n-wf",
        actions: {
          showWfModal2() {
            showModal("discourse-n8n-wf").setProperties({"toolbarEvent": this.toolbarEvent});
          },
        },
      });
      api.addToolbarPopupMenuOptionsCallback(() => {
        return {
          action: "showWfModal2",
          icon: "network-wired",
          label: "n8n workflow"
        };
      });

但如果将其放在顶层，我似乎无法访问要传递给模态框的 toolbarEvent：

      Composer.reopen({
        actions: {
          showWfModal: function () {
            console.log(this.toolbarEvent); // undefined
            showModal('discourse-n8n-wf', {title:'Insert n8n workflow'});
          }
        }
      });

      api.onToolbarCreate(toolbar => {
        toolbar.addButton({
          id: 'discourse-n8n-wf',
          group: 'extras',
          icon: 'network-wired',
          action: 'showWfModal',
          title: 'Insert workflow'
        });
      });

有什么建议吗？

2 个赞
2

toolbarEvent 应该已在您的模态控制器（discourse-n8n-wf）中可用，您无需传递它。您也可以查看其他模态窗口是如何实现这一点的，例如，请查看 poll 插件中的 discourse-post-event-builder.js.es6。

3

谢谢，Penar！不过我还没完全搞明白：

我在 discourse-calendar 插件中找到了你提到的文件（在 poll 插件中没找到），但在那里看起来 toolbarEvent 确实是通过 setProperties() 在 action 中传递的？

4

只是想问问，@pmusaraj，您对此是否还有其他想法？

5

嘿 @sirdavidoff

不确定你是否还在纠结这个问题，但我深入研究了如何从模态框访问工具栏事件，并发现你可以像这样将事件作为参数传递：

action: (event) =>

所以我这样使用了它：

  const composerController = api.container.lookup('controller:composer');

  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: 'math-editor',
      group: 'extras',
      icon: 'square-root-alt',
      sendAction: (event) => composerController.send('showMathEditor', event),
      title: themePrefix('insert_equation'),
    });
  });

然后你可以在你的 action: {} 方法 中像这样使用它：

@action
showMathEditor(event) {
   showModal('matheditor-modal').set('toolbarEvent', event);
}
2 个赞
6

多年后，我也遇到了同样的问题（在模态框中无法访问 toolbarEvent），这个解决方案也帮到我了。

      api.onToolbarCreate((toolbar) => {
        toolbar.addButton({
          ...
          sendAction: (event) =>
            toolbar.context.send("triggerMyModal", event),
          ...
        });
      });

      api.modifyClass("component:d-editor", {
        modal: service(),
        pluginId: "poll",
        actions: {
          triggerMyModal(toolbarEvent) {
            this.modal.show(MyCustomModal, {
              model: {
                toolbarEvent,
              },
            });
          },
        },
      });

感谢 Keegan 的帮助。

3 个赞