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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
Danke, dass Sie mich in die richtige Richtung gewiesen haben. Ich scheine auf ein weiteres Problem zu stoßen. Es wird nicht geladen/gerendert, wenn die Themenseite geöffnet wird, die das Skript verwenden würde. Erst nach dem Aktualisieren der Seite wird es richtig geladen, aber nicht jedes Mal. Liegt das daran, dass Discourse eine Single Page Application ist? Ich versuche nur herauszufinden, ob mein Wissen über Discourse mangelhaft ist oder ob ich etwas selbst programmieren muss.
Hier ist der aktuelle Code, den ich verwende. Jede Richtung wäre sehr willkommen
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(()=>{
})
})
});
Ich habe mich daran versucht und ähnliche Ergebnisse erzielt. Ich habe versucht, decorateCookedElement zu verwenden, da wir decorateCooked irgendwann auslaufen lassen werden.
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 }
);
Der geringfügige Unterschied hier ist, dass ich den Schlüssel mit dem Datenattribut übergeben habe:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Das funktioniert für mich in Ordnung, wenn es das erste Mal ist, dass das Skript geladen wird. Wenn ich einen Beitrag mit dem Skript ansehe, dann zur Themenliste zurückkehre und das Thema erneut aufrufe, funktioniert es nicht (bis ich aktualisiere). Ich kann sehen, dass decorateCookedElement jedes Mal ausgelöst wird, wenn der relevante Beitrag geladen wird, aber etwas hindert das Skript daran, erneut zu funktionieren.
Ich bin mir nicht sicher, ob es damit zusammenhängt, aber ich sehe auch einen Uncaught TypeError: i is null-Fehler in der Konsole von pa.widget.js:
1 „Gefällt mir“
