Estou tentando adicionar um widget ao editor. Consegui chegar até o ponto em que posso inserir o código pela barra de ferramentas, mas não tenho certeza de como fazer o JavaScript funcionar dentro dele. Estou assumindo que precisarei adicionar o JavaScript internamente, seja como um plug-in ou como um componente do tema, em vez de chamá-lo de um site externo, mas não sei como fazer isso. Isso é possível dentro do editor?
Você pode ser um pouco mais específico sobre o que está tentando fazer? Está tentando adicionar um novo botão na barra de ferramentas que insira conteúdo na área de texto do editor? Ou algo diferente?
O que estou tentando fazer é permitir que os usuários insiram seu widget específico no compositor, onde tudo o que precisam fazer é digitar um número e a barra de ferramentas o envolve. Por exemplo, se digitarem 112756, o código a seguir seria envolvido ao redor dele.
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Carregando Widget do PurpleAir...</div>
<script src='https://www.purpleair.com/pa.widget.js?key=N6HB6JJ0BP1Z05SE&module=AQI&conversion=C0&average=10&layer=detailed&container=PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'></script>
Espero que fique algo assim:
2 curtidas
Ok, então parece que você já descobriu como adicionar conteúdo ao editor? (Se não, consultar este exemplo pode ajudar: GitHub - discourse/discourse-gifs · GitHub - esse componente de tema abre um modal quando o botão é clicado na barra de ferramentas e, em seguida, insere conteúdo no editor com base na seleção de algum item no modal).
Se você está tentando fazer um script carregar e executar alguma ação no conteúdo da postagem, acredito que esta discussão pode apontá-lo na direção certa… usando loadScript e decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
1 curtida
Você pode ser capaz de usar isso de alguma forma (diretamente ou uma customização bifurcada): Mentionables, que usa um caractere especial em vez de um botão do editor.
1 curtida
Obrigado por me indicar a direção certa, parece que me deparo com outro problema, ele não está carregando/renderizando ao abrir a página do tópico que usaria o script. Somente depois de atualizar a página ele carrega corretamente, mas não todas as vezes. Isso ocorre porque o Discourse é uma Single Page Application, estou apenas tentando descobrir se meu conhecimento sobre o Discourse é limitado ou se é algo que preciso programar sozinho.
Aqui está o código atual que estou usando. Qualquer direção seria muito apreciada
let loadScript = require('discourse/lib/load-script').default;
api.decorateCooked($elem => { $elem.children('div[data-PAWidget]').ready(function() {
$elem.children('div[data-PAWidget]').append(" <div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>");
loadScript("https://www.purpleair.com/pa.widget.js?key=21R72LUN79CXRZ50&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard").then(()=>{
})
})
});
Tentei fazer isso e obtive resultados semelhantes. Tentei usar decorateCookedElement porque eventualmente desativaremos decorateCooked
api.decorateCookedElement(
(element) => {
element.childNodes.forEach((node) => {
if (node.dataset && node.dataset.pawidget) {
node.insertAdjacentHTML(
"beforeend",
"<div id='PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard'>Loading PurpleAir Widget...</div>"
);
loadScript(
`https://www.purpleair.com/pa.widget.js?key=${node.dataset.pawidget}&module=AQI&conversion=C0&average=0&layer=standard&container=PurpleAirWidget_11726_module_AQI_conversion_C0_average_0_layer_standard`
);
}
});
},
{ id: "widget-append", onlyStream: true, afterAdopt: true }
);
A pequena diferença aqui é que passei a chave com o atributo de dados:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Isso funciona bem para mim se for a primeira vez que o script é carregado. Se eu visualizar uma postagem com o script, voltar para a lista de tópicos e entrar novamente no tópico, ele não funciona (até que eu atualize). Posso ver que decorateCookedElement está sendo acionado a cada vez que a postagem relevante é carregada, mas há algo impedindo que o script funcione novamente.
Não tenho certeza se está relacionado, mas também vejo um erro Uncaught TypeError: i is null no console de pa.widget.js:
1 curtida
