插件点击工具栏按钮后显示模态对话框

开发
1

大家好，

我之前从事过 iOS（Swift）开发，对 Rails 和 Javascript 只有初步的了解。我正在尝试为 discourse 开发一个插件，但在编辑器 UI 工具栏中单击按钮后显示模态对话框时遇到了困难。

我已经成功添加了按钮，大致如下：

assets/javascripts/discourse/initializers/audio-message-button.js.es6

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeWithApi(api) {
  api.onToolbarCreate(toolbar => {
    toolbar.addButton({
      id: "audio_message",
      group: "extras",
      icon: "microphone",
      perform: (editor) => {

      }
    });
  });
}

export default {
  name: 'audio-message-button',
  initialize(container) {
    withPluginApi('0.12.0', api => initializeWithApi(api));
  }
};

我一直在尝试利用 ChatGPT 来帮助我开发，它在文件夹结构方面提出了一些建议。使用组件、模板、控制器文件，但我无法显示对话框。要么出现错误消息，要么什么也不发生。

我尝试在这里搜索论坛，但找不到任何能帮助我的内容。

有人能告诉我如何设置文件夹结构，特别是涉及到的文件的命名约定，以便我能显示一个简单的模态对话框来开始吗？

提前感谢！

编辑：我知道上面的代码中的 perform 函数不起作用。我尝试了几种方法来使其工作，但都没有成功。所以我在这里将其留空，只是演示了我到目前为止所做的，以便在工具栏中显示按钮。

2

嗨 peter :slight_smile:

我没有知识来回答你的问题，但这里有一个插件和一个主题组件，它们都在编辑器中添加了一个按钮，可以打开一个模态框，也许你会在它们的代码中找到一些线索：

1 个赞
3

谢谢 @Canapin，

这些插件帮助我找到了正确的方向 :slight_smile:

1 个赞
4

欢迎在此分享您的工作代码，这一定会帮助到其他人 :slight_smile:

1 个赞
5

我一定会在这里分享可用的代码，甚至整个插件，等我整理好并完成后 :slightly_smiling_face:

1 个赞
6

如承诺在此分享：

1 个赞