Sto cercando di aggiungere un widget al composer. Sono arrivato fino al punto in cui riesco a inserire il codice dalla barra degli strumenti, ma non sono sicuro di come far funzionare il JavaScript al suo interno. Presumo che dovrò includere il JavaScript internamente, sia come plugin che come componente del tema, invece di richiamarlo da un sito esterno, ma non sono sicuro di come procedere. È possibile farlo all’interno del composer?
Puoi essere un po’ più specifico su cosa stai cercando di fare? Stai cercando di aggiungere un nuovo pulsante alla barra degli strumenti che inserisce contenuto nell’area di testo dell’editor? O qualcos’altro?
Quello che sto cercando di fare è permettere agli utenti di inserire il proprio widget specifico dal composer, dove dovranno solo digitare un numero e la barra degli strumenti lo racchiuderà automaticamente. Ad esempio, se digitano 112756, verrà avvolto il seguente codice:
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Caricamento widget 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>
Speriamo che il risultato assomigli a questo:
2 Mi Piace
Ok, sembra che tu abbia già capito come aggiungere contenuto al composer? (Se non è così, fare riferimento a questo esempio potrebbe aiutarti: GitHub - discourse/discourse-gifs · GitHub - questo componente del tema apre una finestra modale quando il pulsante viene cliccato dalla barra degli strumenti, quindi inserisce contenuto nel composer in base alla selezione di alcuni elementi nella finestra modale).
Se stai cercando di far caricare uno script che modifichi il contenuto del post, penso che questo post possa indicarti la direzione giusta… utilizzando loadScript e decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
1 Mi Piace
Potresti essere in grado di utilizzarlo in qualche modo (direttamente o come personalizzazione derivata): Mentionables che utilizza un carattere speciale invece di un pulsante del compositore.
1 Mi Piace
Grazie per avermi indicato la giusta direzione, sembra che incontri un altro problema, non si carica/renderizza quando apro la pagina dell’argomento che utilizzerebbe lo script. Solo dopo aver aggiornato la pagina si carica correttamente, ma non sempre. È perché Discourse è un’applicazione a pagina singola, sto solo cercando di capire se la mia conoscenza di Discourse è carente o se c’è qualcosa che devo programmare da solo.
Ecco il codice che sto attualmente utilizzando. Qualsiasi indicazione sarebbe molto apprezzata
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(()=>{
})
})
});
Ho provato a fare un tentativo e ho ottenuto risultati simili. Ho provato a usare decorateCookedElement perché alla fine depreccheremo 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 }
);
La leggera differenza qui è che ho passato la chiave con l’attributo data:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Questo funziona bene per me se è la prima volta che lo script viene caricato. Se visualizzo un post con lo script, poi torno all’elenco degli argomenti e rientro nell’argomento, non funziona (finché non aggiorno). Vedo che decorateCookedElement viene eseguito ogni volta che viene caricato il post pertinente, ma c’è qualcosa che impedisce allo script di funzionare di nuovo.
Non sono sicuro se sia correlato, ma vedo anche un errore Uncaught TypeError: i is null nella console da pa.widget.js:
1 Mi Piace
