أحاول إضافة عنصر واجهة مستخدم إلى المُنشئ، وقد وصلت إلى مرحلة يمكنني فيها إدراج الكود من شريط الأدوات، لكنني لست متأكداً من كيفية جعل جافا سكريبت يعمل داخله. أفترض أنني سأحتاج إلى إضافة جافا سكريبت داخلياً إما كإضافة أو كمكون للسمة بدلاً من استدعائه من موقع خارجي، لكنني لست متأكداً من كيفية القيام بذلك. هل هذا ممكن ضمن المُنشئ؟
هل يمكنك أن تكون أكثر تحديدًا بشأن ما تحاول فعله؟ هل تحاول إضافة زر شريط أدوات جديد يضيف محتوى إلى منطقة نص المحرر؟ أم شيء آخر؟
ما أحاول فعله هو تمكين المستخدمين من إدراج أداة (widget) محددة من خلال المُنشئ، حيث يكون كل ما عليهم فعله هو كتابة رقم، بحيث تُحيط به شريط الأدوات تلقائيًا. على سبيل المثال، إذا تم كتابة الرقم 112756، فسيتم تغليف الكود التالي حوله:
<div id='PurpleAirWidget_112756_module_AQI_conversion_C0_average_10_layer_detailed'>جاري تحميل أداة 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>
نأمل أن يظهر الشكل النهائي شيئًا مثل هذا:
إعجابَين (2)
حسنًا، يبدو أنك قد فهمت بالفعل كيفية إضافة محتوى إلى المحرر؟ (إذا لم يكن الأمر كذلك، فقد يساعدك الرجوع إلى هذا المثال: GitHub - discourse/discourse-gifs · GitHub - حيث يفتح هذا المكون الخاص بالمظهر نافذة منبثقة عند النقر على الزر من شريط الأدوات، ثم يقوم بإدراج محتوى في المحرر بناءً على النقر على بعض العناصر داخل النافذة المنبثقة).
إذا كنت تحاول تحميل نص برمجي لتنفيذ إجراء ما على محتوى المنشور، فأعتقد أن هذا المنشور قد يوجهك إلى الاتجاه الصحيح… باستخدام loadScript و decorateCooked: Difficulties in correctly adding external JavaScript - #4 by StevenTammen
إعجاب واحد (1)
قد تتمكن من استخدام هذا بطريقة ما (إما مباشرة أو عبر تخصيص مشتق): Mentionables والذي يستخدم حرفًا خاصًا بدلاً من زر المؤلّف.
إعجاب واحد (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)
