# Exibir um diálogo modal após clicar no botão da barra de ferramentas via plugin
**URL:** https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521
**Category:** Development
**Created:** [Junho 24, 2023, 10:21pm UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521 "2023-06-24T22:21:59Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@peter.be](https://meta.discourse.org/u/peter.be)
#### Post date: [Junho 24, 2023, 10:21pm UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521/1 "2023-06-24T22:21:59Z")
Olá a todos,
Tenho experiência em desenvolvimento iOS (Swift), apenas conhecimento superficial com Rails e Javascript. Estou tentando desenvolver um plugin para o Discourse e estou tendo problemas para exibir uma caixa de diálogo modal após clicar em um botão na barra de ferramentas da interface do editor de posts.
Consegui adicionar o botão com algo parecido com isto:
```js
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));
}
};
```
Tenho tentado usar o ChatGPT para me ajudar no desenvolvimento, e ele fez várias sugestões em relação à estrutura de pastas. Usando componentes, templates, arquivos de controller, mas não consigo fazer o diálogo aparecer. Ou recebo mensagens de erro ou nada acontece.
Já tentei pesquisar no fórum aqui, mas não consigo encontrar nada que possa me ajudar com isso.
Alguém pode me indicar a direção correta sobre como devo configurar a estrutura de pastas e, especialmente, as convenções de nomenclatura dos arquivos envolvidos, para que eu possa exibir um diálogo modal simples para começar?
Agradeço antecipadamente!
EDIT: Estou ciente de que a função `perform` não faz nada no código acima. Tentei vários métodos para fazê-la funcionar, mas nada ajudou. Então a deixei em branco aqui, apenas demonstrando o que fiz até agora para fazer o botão aparecer na barra de ferramentas.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [Junho 26, 2023, 7:46am UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521/2 "2023-06-26T07:46:17Z")
Olá Peter 🙂
Eu não tenho o conhecimento para responder à sua pergunta, mas aqui estão um plugin e um componente de tema que ambos adicionam um botão ao compositor que abre uma janela modal, talvez você encontre algumas dicas em seus códigos:
> [@Locations Plugin earth\_africa](https://meta.discourse.org/t/locations-plugin/69742?u=canapin):
>
> information_sourceSummary Allows you to associate geocoded locations with Topics and show them on a beautiful map. Also allows your users to record their location and collectively display them on a central users map on your site.hammer_and_wrenchRepository Link [GitHub - merefield/discourse-locations: Tools for handling locations in Discourse](https://github.com/merefield/discourse-locations)open_bookInstall Guide [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157)heartSponsorship Please consider becoming an ongoing [sponsor of my …](https://github.com/sponsors/merefield)
> [@Video Upload to YouTube and Vimeo using Theme Component](https://meta.discourse.org/t/video-upload-to-youtube-and-vimeo-using-theme-component/170079):
>
> This new theme component enables video uploads from the Discourse composer to YouTube and Vimeo. For those already familiar with [the plugin I developed recently](https://meta.discourse.org/t/discourse-video-upload-plugin-with-youtube-and-vimeo/168569), the same is now available in this Theme Component which can be added to any theme. This makes for a much easier installation and works in exactly the same way as the plugin. Features All forum members can upload videos to Vimeo or YouTube (admins can choose to enable either or both). Admins can control the view and embed privacy of th…
---
### Author:  [@peter.be](https://meta.discourse.org/u/peter.be)
#### Post date: [Junho 28, 2023, 1:58am UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521/3 "2023-06-28T01:58:03Z")
Obrigado @Canapin,
estes plugins ajudaram a me direcionar na direção certa 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [Junho 28, 2023, 12:11pm UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521/4 "2023-06-28T12:11:26Z")
Sinta-se à vontade para compartilhar seu código de trabalho aqui, ele certamente ajudará outras pessoas 🙂
---
### Author:  [@peter.be](https://meta.discourse.org/u/peter.be)
#### Post date: [Junho 28, 2023, 5:53pm UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521/5 "2023-06-28T17:53:35Z")
Com certeza compartilharei o código funcionando aqui, o plugin inteiro, na verdade, quando estiver limpo e eu terminar com ele 🙂
---
### Author:  [@peter.be](https://meta.discourse.org/u/peter.be)
#### Post date: [Julho 3, 2023, 7:57pm UTC](https://meta.discourse.org/t/show-a-modal-dialog-after-clicking-toolbar-button-via-a-plugin/269521/6 "2023-07-03T19:57:13Z")
Compartilhando aqui como prometido:
> [@Discourse Audio Message](https://meta.discourse.org/t/discourse-audio-message/270432):
>
> information_sourceSummary Discourse Audio Message allows users to directly record and attach audio messages to their posts.hammer_and_wrenchRepository Link [https://github.com/pbenkoe/discourse-audio-message](https://github.com/pbenkoe/discourse-audio-message)open_bookInstall Guide [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) This plugin was developed with the help of ChatGPT, as my background in backend/javascript development is limited. The implementation is very basic, but I hope it will help some people and maybe it can ser…