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 هو تطبيق ذو صفحة واحدة (Single Page Application)، أنا فقط أحاول معرفة ما إذا كانت معرفتي بـ 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(()=>{
})
})
});
لقد حاولت القيام بذلك وانتهى بي الأمر بنتائج مماثلة. حاولت استخدام decorateCookedElement لأننا سنقوم بإيقاف 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 }
);
الاختلاف الطفيف هنا هو أنني مررت المفتاح مع سمة البيانات:
<div data-PAWidget="21R72LUN79CXRZ50"></div>
هذا يعمل بشكل جيد بالنسبة لي إذا كانت هذه هي المرة الأولى التي يتم فيها تحميل البرنامج النصي. إذا قمت بعرض منشور بالبرنامج النصي، ثم عدت إلى قائمة الموضوعات وأعدت إدخال الموضوع، فلن يعمل (حتى أقوم بتحديث). يمكنني رؤية decorateCookedElement يتم تشغيله في كل مرة يتم فيها تحميل المنشور ذي الصلة، ولكن هناك شيء يمنع البرنامج النصي من العمل مرة أخرى.
لست متأكدًا مما إذا كان ذلك متعلقًا، ولكني أرى أيضًا خطأ Uncaught TypeError: i is null في وحدة التحكم من pa.widget.js:
إعجاب واحد (1)
