الملحق: الوصول إلى toolbarEvent من النافذة المنبثقة

مطور
1

يضيف ملحقي زرًا في شريط أدوات المحرر. تفتح هذه الشريط نافذة منبثقة، وعندما تُغلق النافذة أريد إضافة نص إلى المنشور. كل شيء يعمل بشكل مثالي باستثناء الخطوة الأخيرة، لأنني أواجه صعوبة في منح النافذة المنبثقة صلاحية الوصول إلى المحرر.

إذا وضعت الزر ضمن قائمة في شريط الأدوات، فكل شيء يعمل بشكل صحيح:

      api.modifyClass("controller:composer", {
        pluginId: "discourse-n8n-wf",
        actions: {
          showWfModal2() {
            showModal("discourse-n8n-wf").setProperties({"toolbarEvent": this.toolbarEvent});
          },
        },
      });
      api.addToolbarPopupMenuOptionsCallback(() => {
        return {
          action: "showWfModal2",
          icon: "network-wired",
          label: "n8n workflow"
        };
      });

لكن إذا وضعت الزر على المستوى الأعلى، فلا أبدو وكأن لدي صلاحية الوصول إلى toolbarEvent لتسليمه إلى النافذة المنبثقة

      Composer.reopen({
        actions: {
          showWfModal: function () {
            console.log(this.toolbarEvent); // undefined
            showModal('discourse-n8n-wf', {title:'Insert n8n workflow'});
          }
        }
      });

      api.onToolbarCreate(toolbar => {
        toolbar.addButton({
          id: 'discourse-n8n-wf',
          group: 'extras',
          icon: 'network-wired',
          action: 'showWfModal',
          title: 'Insert workflow'
        });
      });

هل لديك أي نصائح؟

إعجابَين (2)
2

يجب أن يكون toolbarEvent متاحًا في وحدة التحكم في النافذة المنبثقة (discourse-n8n-wf)، لذا لا تحتاج إلى تمريره. يمكنك أيضًا الاطلاع على كيفية قيام النوافذ المنبثقة الأخرى بذلك، على سبيل المثال، انظر إلى discourse-post-event-builder.js.es6 في إضافة الاستطلاع.

3

شكرًا لك، بينار! لكنني لم أصل إلى هناك بعد:

وجدت الملف الذي أشرت إليه في إضافة discourse-calendar (لم أجدّه في إضافة الاستطلاع)، لكن يبدو أن toolbarEvent يتم تمريره بالفعل في الإجراء (عبر setProperties())؟

4

كنت أتساءل فقط عما إذا كان لديك أي أفكار أخرى هنا، @pmusaraj؟

5

مرحباً @sirdavidoff

لست متأكداً مما إذا كنت لا تزال عالقاً في هذا الأمر، ولكني تعمقت في محاولة معرفة كيفية الوصول إلى حدث شريط الأدوات من نافذة منبثقة أيضاً، ووجدت أنه يمكنك تمرير الحدث كمعلمة بهذا الشكل:

action: (event) =>

لذلك استخدمته على هذا النحو:

  const composerController = api.container.lookup('controller:composer');

  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: 'math-editor',
      group: 'extras',
      icon: 'square-root-alt',
      sendAction: (event) => composerController.send('showMathEditor', event),
      title: themePrefix('insert_equation'),
    });
  });

وبعد ذلك يمكنك استخدامه في طريقة action: {} الخاصة بك على هذا النحو:

@action
showMathEditor(event) {
   showModal('matheditor-modal').set('toolbarEvent', event);
}
إعجابَين (2)
6

أود أن أضيف - بعد سنوات، واجهت نفس المشكلة (لم يكن لدي وصول إلى toolbarEvent داخل نافذة منبثقة)، وهذا الحل نجح معي أيضًا.

      api.onToolbarCreate((toolbar) => {
        toolbar.addButton({
          ...
          sendAction: (event) =>
            toolbar.context.send("triggerMyModal", event),
          ...
        });
      });

      api.modifyClass("component:d-editor", {
        modal: service(),
        pluginId: "poll",
        actions: {
          triggerMyModal(toolbarEvent) {
            this.modal.show(MyCustomModal, {
              model: {
                toolbarEvent,
              },
            });
          },
        },
      });

شكرًا للمساعدة يا كيغان.

3 إعجابات