إضافة زر استطلاع في أسفل المحرر

مطور
7

هذا في الواقع أكثر تعقيدًا مما يبدو (فكم من الصعوبة يمكن أن يكون نقل زر لليمين؟ :slight_smile: )

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

إذا حاولت إعادة إنشاء سلوك شريط الأدوات، فستواجه المشكلات الفورية التي ذكرها @spirobel، ولكن من المرجح أن تواجه مشكلات أخرى في المستقبل مع تعديلات منطق تحليل النص.

المبدأ الأساسي هو محاولة استخدام الوظيفة على أعلى مستوى من التجريد، أي أننا بحاجة إلى شريط أدوات محرر المؤلف الفعلي..لذا دعنا نحصل عليه.

أي:

api.modifyClass("component:d-editor", {
  @on('didInsertElement')
  makeToolbarAccessible() {
    if (this.outletArgs && this.outletArgs.editorType === 'composer') {
      const controller = getOwner(this).lookup('controller:composer');
      controller.set('editorToolbar', this.toolbar);
    }
  }
});

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

setupComponent(attrs, ctx) {
  const controller = getOwner(this).lookup('controller:composer');
  
  controller.addObserver('editorToolbar', function() {
    if (this._state === 'destroying') return;

    const toolbar = controller.editorToolbar;
          
    toolbar.addButton({
      group: "extras",
      icon: "chart-bar",
      title: "poll.ui_builder.title",
      sendAction: e => {
        controller.send('storeToolbarState', e);
        this.send("showPollBuilder");
      }
    });
    
    const extras = toolbar.groups.find(g => g.group == 'extras');
    const pollButton = extras.buttons.find(b => b.icon == "chart-bar");
        
    ctx.set('pb', pollButton);
  });
}

ثم في القالب نفسه

{{d-button
  type="button"
  action=pb.action
  actionParam=pb
  translatedTitle=pb.title
  icon=pb.icon
  class=pb.className}}

@nexo جرب هذا المكون الخاص بالقالب: discourse-poll-button-bottom.zip (2.5 KB)

ملاحظة: لقد قمت بتحميله للتو على thepavilion.io ويبدو أنه يعمل (على الهواتف المحمولة فقط).