شريط أدوات التنسيق

لا أظن أنني سأكون قادرًا على فعل شيء كهذا. عندما قمت بإنشاء الإضافة، لم نكن نستخدم FontAwesome5، ولم أجد أيقونة مناسبة للمحاذاة لليمين. إذا كان لديك…

لكن إذا أردت تغيير الزر الافتراضي، فلك حلان:

إخفاء زر المحاذاة لليسار باستخدام CSS التالي:

/* زر المحاذاة لليسار */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

ثم استيراد مكون سمة سيضيف زرًا للمحاذاة لليمين.

ما يمكنك فعله هو تحميل discourse-floatr.zip (1.2 كيلوبايت)

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

https://theme-creator.discourse.org/theme/Steven/floatr

إعجاب واحد (1)

ستيفن! أنت عبقري! شكرًا جزيلاً لك على العمل الإضافي في هذا :folded_hands:

لقد اخترت الخيار 2 لأنني لا أعرف كيف أفرع وأعدل إضافة!

كل شيء عمل بشكل مثالي والآن يعمل هذا الزر تمامًا كما نريد!

إعجاب واحد (1)

سؤال آخر هنا… هل توجد طريقة سهلة لنقل أزرار معينة من الشريط الرئيسي وإخفائها في قائمة أيقونة الترس؟

على سبيل المثال:

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

الطريقة السهلة؟ لا. سيتطلب ذلك بعض التعديلات مثل زر العائم.

إما أن تقوم بتفرع وتعديل الإضافة، أو إخفاء الأزرار وإعادة إنشائها في خيار قائمة منبثقة في شريط الأدوات.

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

https://github.com/iunctis/md-composer-extras

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

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

سيكون رائعًا لو أضفت تلك الأزرار الإضافية إلى أيقونة الترس “القائمة المنبثقة” بحيث تكون هناك خيارات أقل للمستخدمين العاديين لرؤيتها. أنا متمكن من CSS وفحص عناصر المتصفح لمعرفة الفئات/المعرفات التي أريد تعديلها. هل يمكنني فعل الشيء نفسه مع “مكونك” حتى أستطيع النظر إلى بناء الجملة للرمز بسهولة وتحديد الأزرار التي أريد إضافتها إلى القائمة و/أو إزالتها من القائمة وإعادتها إلى الشريط؟ أم أن الأمر أكثر تعقيدًا من ذلك؟

الأمر أكثر تعقيدًا لأنه لا يستخدم نفس جافا سكريبت.

لقد قمت بإنشاء مثال سريع؛ إذا كنت ترغب في إضافة زر شطب في المحرر، فيجب استخدام جافا سكريبت التالي:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

أما بالنسبة لخيارات قائمة شريط الأدوات، فهي مختلفة تمامًا:

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

لم أضف الترجمات اللازمة لخيارات شريط الأدوات وما إلى ذلك، لكنك ستفهم الفكرة.

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

على أي حال، إذا كنت ترغب في الاحتفاظ بـ BBCode مع نقل الأزرار إلى خيارات القائمة، فأعتقد أن أفضل طريقة هي الاحتفاظ بالإضافة، إخفاء الأزرار عبر CSS، واستخدام مكون سمة لإضافة الأزرار إلى خيارات القائمة. هذا ممكن تمامًا نظرًا لأننا قمنا سابقًا بشيء مشابه لزر العائم. الأمر يتطلب بعض الوقت، لكن إذا كنت تشعر بالضياع في هذا الموضوع، يمكنني مساعدتك.

بالنسبة لمكونات السمات، يُفضل استخدام Discourse Theme، حيث يمكنك إضافة إعدادات لمكونك، وترجمات، والكود، ومعاينته. إنها أداة رائعة جدًا للمبدعين.

إعجابَين (2)

أنت رائع يا @Steven! شكرًا لك على هذا الرد الشامل. أعتقد أنني سأنتظر وأرى كيف يتعامل المجتمع مع وجود جميع الخيارات، وإذا سمعت أن الأمر محيرًا، فسأتبع نهجك الثاني هنا مع مكونات السمة. يبدو لي أن هذا النهج واضح جدًا.

شكرًا مرة أخرى على مساعدتك ودعمك لهذه الإضافة الرائعة. بالمناسبة… لا يمكنني أن أشكرك بما يكفي على مساعدتي في تغيير زر العائم الافتراضي إلى “اليمين”. لقد كان ذلك رائعًا!

سؤال سريع: ما الذي نغيره في كود api.onToolbarCreate في سمة (theme) الخاصة بنا للحصول على إجراء زر مختلف في المحرر؟

بشكل أساسي، نريد إضافة زر جديد في المحرر يقوم بإحاطة كتلة متعددة الأسطر من الكود بعلامات MD التالية:

```text

```
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

بحيث تكون النتيجة محيطة بكتلة متعددة الأسطر من الكود بدلاً من تطبيق الإجراء الجديد على كل سطر على حدة؟

قبل إجراء الزر:

بعد إجراء الزر:

أفترض أن هناك طريقة مختلفة عن e.applySurround تعمل على كتلة نصية متعددة الأسطر؟ لكن البحث في الموقع وفي جوجل لم يُسفر عن أي نتائج، لذا بعد 30 دقيقة من البحث، قررت نشر سؤال.

كما أنني بحثت في https://docs.discourse.org/ باستخدام كلمات مفتاحية مختلفة ولم أحظَ بالحظ.

شكرًا لك،

وجدت الطريقة / المعامل multiline: false بعد المزيد من البحث في جوجل…

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

إذن، أنا جاهز الآن. شكرًا لك.

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

لا يوجد أي تعارض على الإطلاق.

يبدو أن إضافة BBCode الخاصة بـ Discourse لا تزال إضافة خارجية وليست مدمجة في النواة.

لديك خياران:

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

لا ينبغي أن يكون شريط تنسيق التنسيق معطلاً أو يسبب تعارضًا مع نواة Discourse.

إعجاب واحد (1)

كنتُ أستخدم سابقًا مكون موضوع md composer مع إضافة bbcode الرسمية. ومع ذلك، لا يوجد زر لتغيير لون النص وهو ما توفره هذه الإضافة. من المثالي وجود منتقي ألوان، لكنني لا أعتقد أن ذلك ممكن.

آه، فهمت الآن. المكون يستخدم فقط العناصر المتاحة في النواة، بينما يتطلب كود اللون (bbcode) إضافة واحدة كما تعلم. ليس من الصعب تعديل زر في المكون (أو عمل نسخة مشتقة على GitHub)، ولكن في حالتك أنت محق، هذه الإضافة هي الخيار الأفضل.

يمكنك تثبيت هذه الإضافة، لكنني أنصحك بإلغاء تثبيت إضافة كود اللون الرسمية في نفس الوقت لتجنب أي تعارض في محرك Markdown.

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

إعجاب واحد (1)

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

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

image

لاحظت أن هذه الإضافة تتضمن زرًا آخر “إدراج صورة”. هل هذا ضروري حقًا بما أن الزر الأصلي يسمح بإرفاق الملفات أو رابط URL؟ أنا أحب أزرار التنسيق بشكل عام. أتساءل فقط لأن وجود أيقونتي صورة في محرر النص يبدو غريبًا. إذا لم يكن بالإمكان إزالته، سأضطر للعودة إلى استخدام محرر Markdown + BBCode الرسمي.

إعجاب واحد (1)

يمكنك بسهولة استخدام CSS لإخفاء أي زر أو عنصر تريده في شريط أدوات المحرر.

أو، بديل آخر:

يمكنك بسهولة تعديل الإضافة لإزالة أي زر لا ترغب في عرضه في شريط أدوات المحرر.

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

إذا قمت بتعليق الأسطر، هل سيكون ذلك كافيًا لإزالة الزر؟

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

من الأفضل إضافة بعض CSS في قالبك

/* زر الصورة */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
إعجاب واحد (1)