Ich versuche, ein Widget zum Composer hinzuzufügen. Ich bin so weit gekommen, dass ich den Code aus der Symbolleiste einfügen kann, aber ich bin mir nicht sicher, wie ich das JavaScript darin zum Laufen bekomme. Ich gehe davon aus, dass ich das JavaScript intern hinzufügen muss, entweder als Plugin oder als Theme-Komponente, anstatt es von einer externen Seite aufzurufen. Allerdings bin ich mir nicht sicher, wie ich das genau umsetzen soll. Ist das im Composer überhaupt möglich?
Könntest du etwas genauer beschreiben, was du vor hast? Möchtest du eine neue Symbolleisten-Schaltfläche hinzufügen, die Inhalt in das Textfeld des Editors einfügt, oder etwas anderes?
Was ich erreichen möchte, ist, dass Benutzer ihren spezifischen Widget-Code im Composer einfügen können, wobei sie nur eine Nummer eingeben müssen und die Symbolleiste diese automatisch umschließt. Wenn beispielsweise 112756 eingegeben wird, sollte der folgende Code automatisch darum herum eingefügt werden:
<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>
Das sollte hoffentlich so aussehen:
2 „Gefällt mir“
Ok, klingt also, als hättest du bereits herausgefunden, wie man Inhalte zum Composer hinzufügt? (Falls nicht, könnte dir dieses Beispiel weiterhelfen: GitHub - discourse/discourse-gifs · GitHub – diese Theme-Komponente öffnet ein Modal, wenn der Button in der Symbolleiste geklickt wird, und fügt dann basierend auf der Auswahl im Modal Inhalte in den Composer ein).
Wenn du versuchst, ein Skript zu laden, das etwas mit dem Beitragsinhalt macht, könnte dich dieser Beitrag in die richtige Richtung lenken: Verwendung von loadScript und decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
1 „Gefällt mir“
Vielleicht können Sie dies auf irgendeine Weise nutzen (entweder direkt oder als abgeleitete Anpassung): Mentionables, das anstelle einer Komponier-Schaltfläche ein Sonderzeichen verwendet.
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“
