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
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
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
ご指摘の方向に進めさせていただきありがとうございます。別の問題に直面しているようです。スクリプトを使用するトピックページを開いたときに読み込み/レンダリングされません。ページをリフレッシュした後にのみ正しく読み込まれますが、毎回ではありません。これは Discourse がシングルページアプリケーションであるためでしょうか？私の Discourse に関する知識が不足しているのか、それとも自分で何かをプログラムする必要があるのかを理解しようとしています。
現在使用しているコードは次のとおりです。どのような方向性でも大変感謝いたします。
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(() => {
})
})
});
試してみましたが、同様の結果になりました。最終的には decorateCooked を非推奨にする予定なので decorateCookedElement を使用しようとしました。
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 }
);
ここでわずかに異なるのは、データ属性にキーを渡したことです。
<div data-PAWidget="21R72LUN79CXRZ50"></div>
これは、スクリプトが初めて読み込まれる場合にのみ、私にとってはうまく機能します。スクリプトが表示されている投稿を表示してから、トピックリストに戻ってトピックを再入力すると、機能しません（更新するまで）。関連する投稿が読み込まれるたびに decorateCookedElement が実行されていることはわかりますが、スクリプトが再度機能するのを妨げている何かがあります。
関連しているかどうかわかりませんが、pa.widget.js からコンソールに Uncaught TypeError: i is null というエラーも表示されます。
「いいね！」 1
