J’essaie d’ajouter un widget dans l’éditeur de texte. J’ai avancé suffisamment pour pouvoir insérer le code depuis la barre d’outils, mais je ne sais pas comment faire fonctionner le JavaScript à l’intérieur. Je suppose que je devrai intégrer le JavaScript en interne, soit sous forme de plugin, soit comme composant de thème, plutôt que de l’appeler depuis un site externe, mais je ne sais pas comment procéder. Est-ce réalisable dans l’éditeur de texte ?
Pourriez-vous être un peu plus précis sur ce que vous essayez de faire ? Cherchez-vous à ajouter un nouveau bouton de barre d’outils qui insère du contenu dans la zone de texte de l’éditeur, ou autre chose ?
Ce que j’essaie de faire, c’est permettre aux utilisateurs d’insérer leur propre widget spécifique depuis le compositeur, où tout ce qu’ils auraient à faire serait de taper un numéro et que la barre d’outils l’encadrerait automatiquement. Par exemple, s’ils tapent 112756, le code suivant serait encapsulé autour de ce numéro :
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>Chargement du 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>
Cela devrait ressembler à quelque chose comme ceci :
D’accord, il semble que vous ayez déjà trouvé comment ajouter du contenu à l’éditeur ? (Sinon, ce exemple pourrait vous aider : GitHub - discourse/discourse-gifs · GitHub - ce composant de thème ouvre une fenêtre modale lors du clic sur le bouton de la barre d’outils, puis insère du contenu dans l’éditeur en fonction du clic sur certains éléments dans la modale).
Si vous essayez de charger un script pour qu’il modifie le contenu du message, je pense que ce sujet pourrait vous orienter dans la bonne direction… en utilisant loadScript et decorateCooked : Difficulties in correctly adding external JavaScript - #4 by StevenTammen
Vous pourriez peut-être l’utiliser d’une certaine manière (soit directement, soit via une personnalisation forkée) : Mentionables, qui utilise un caractère spécial à la place d’un bouton de l’éditeur.
Merci de m’avoir orienté dans la bonne direction, je semble rencontrer un autre problème, cela ne se charge/rend pas lors de l’ouverture de la page de sujet qui utiliserait le script. Ce n’est qu’après avoir actualisé la page qu’il se charge correctement, mais pas à chaque fois. Est-ce parce que Discourse est une application monopage (Single Page Application), j’essaie juste de comprendre si mes connaissances de Discourse sont insuffisantes ou si c’est quelque chose que je dois programmer moi-même.
Voici le code actuel que j’utilise. Toute aide serait grandement appréciée.
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(() => {
})
})
});
J’ai essayé et j’ai obtenu des résultats similaires. J’ai essayé d’utiliser decorateCookedElement car nous allons éventuellement déprécier 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 légère différence ici est que j’ai passé la clé avec l’attribut de données :
<div data-PAWidget="21R72LUN79CXRZ50"></div>
Cela fonctionne bien pour moi si c’est la première fois que le script est chargé. Si je consulte un message avec le script, puis que je reviens à la liste des sujets et que je ré-entre dans le sujet, cela ne fonctionne pas (jusqu’à ce que je rafraîchisse). Je peux voir que decorateCookedElement est déclenché à chaque fois que le message pertinent est chargé, mais quelque chose empêche le script de fonctionner à nouveau.
Je ne suis pas sûr si c’est lié, mais je vois aussi une erreur Uncaught TypeError: i is null dans la console provenant de pa.widget.js :
