Im trying to add a widget to the composer, I have got far enough to where I can insert the code from the tool bar, but I am not sure how to get the javascript working within it. I am assuming that I will need to add the javascript internally either as a plug-in or theme component rather than calling it from an external site, but I am not sure how to go about doing that. Is this doable within the composer?
Can you be a little more specific about what you’re trying to do? Are you trying to add a new toolbar button that adds content to the composer textarea? something else?
What I am trying to is to have users insert their specific widget from the composer where all the would have to do type a number and have the toolbar wrap around it. for example if typed 112756 it would wrap the following code around it.
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Loading PurpleAir Widget...</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>
it would hopefully look something like this
2 Me gusta
Ok so it sounds like you have already figured out how to add content to the composer? (If not, referencing this example may help GitHub - discourse/discourse-gifs - this theme component opens a modal when the button is clicked from the toolbar, and then inserts content into the composer based on clicking some content in the modal).
If you’re trying to get a script to load and do something to the post content, I think this post might get you pointed in the right direction… using loadScript and decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
1 me gusta
You might be able to use this in some way (either directly or a forked customisation): Custom Mentionables which uses a special character instead of a composer button.
1 me gusta
Gracias por señalarme la dirección correcta, parece que me encuentro con otro problema, no se carga/renderiza al abrir la página del tema que usaría el script. Solo después de actualizar la página se carga correctamente, pero no siempre. ¿Es esto porque Discourse es una aplicación de página única? Solo estoy tratando de averiguar si mi conocimiento de Discourse es deficiente o si es algo que debo programar yo mismo.
Aquí está el código actual que estoy usando. Cualquier dirección sería muy 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'>Cargando 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(() => {
})
})
});
Hice un intento y obtuve resultados similares. Intenté usar decorateCookedElement porque eventualmente desaprobaremos 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'>Cargando 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 }
);
La ligera diferencia aquí es que pasé la clave con el atributo de datos:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Esto funciona bien para mí si es la primera vez que se carga el script. Si veo una publicación con el script, luego vuelvo a la lista de temas y vuelvo a ingresar al tema, no funciona (hasta que actualizo). Puedo ver que decorateCookedElement se activa cada vez que se carga la publicación relevante, pero hay algo que impide que el script funcione de nuevo.
No estoy seguro si está relacionado, pero también veo un error Uncaught TypeError: i is null en la consola de pa.widget.js:
1 me gusta
