إضافة أنماط العلامة وأزرارها إلى محرر النصوص.

تعلّم DXPR Builderإدارة الموقعطابقوا علامتكم

عندما ينقر المحرّرون داخل نص في DXPR Builder، يظهر شريط أدوات. ويمكنكم ملء قائمة الأنماط الخاصة به بأنماط علامتكم، مثل فقرة استهلالية أو عبارة مميزة. ويمكنكم أيضًا اختيار الأزرار التي يراها كل دور. فيطبّق المحرّرون عندها مظهر العلامة بنقرة واحدة بدل ضبط الأحجام والألوان يدويًا. وتأتي الخطوط من قالبكم؛ انظر خطوط مخصصة.

قبل أن تبدؤوا

  • لتحرير الأنماط، تحتاجون إلى صلاحية إدارة إعدادات DXPR Builder.
  • لتحرير أزرار شريط الأدوات، تحتاجون إلى صلاحية إدارة ملف تعريف dxpr builder.
  • يحتاج كل نمط إلى CSS خلفه. تعمل فئات Bootstrap 5 مثل lead عندما تحمّل الصفحة Bootstrap 5. وتحتاج فئاتكم الخاصة إلى قاعدة في القالب؛ انظر CSS مخصص.

الإعداد

  1. اذهبوا إلى DXPR Studio > DXPR Builder > الإعدادات العامة (/admin/dxpr_studio/dxpr_builder/settings).
  2. وسّعوا محرر النصوص. يسرد مربع الأنماط المخصصة أصلًا الأنماط المشحونة مع DXPR Builder، سطرًا لكل نمط.
  3. أضيفوا سطرًا لكل نمط بصيغة Label=element.class، واحذفوا الأسطر التي لا تريدونها.
  4. انقروا حفظ الإعدادات.
  5. افتحوا صفحة في المنشئ، أو أعيدوا تحميلها إذا كانت مفتوحة، وانقروا داخل نص.
  6. انقروا الأنماط على شريط الأدوات واختاروا نمطكم.

تضيف هذه الأسطر أربعة أنماط:

Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

يحمل كل سطر ثلاثة أجزاء:

  • تُعدّ التسمية قبل = الاسم الذي يراه المحرّرون في القائمة.
  • يقرّر العنصر بعد = ما يغطيه النمط. فعنصر كتلة مثل p أو h2 أو blockquote ينسّق فقرة أو عنوانًا كاملًا. وعنصر مضمّن مثل span أو mark أو code يغلّف الكلمات المحددة فقط.
  • تتبع كل فئة نقطة. أضيفوا مزيدًا من الفئات بمزيد من النقاط، كما في Callout أعلاه.

تستخدم أسماء العناصر حروفًا وأرقامًا فقط. وتستخدم أسماء الفئات حروفًا وأرقامًا وشرطات وشرطات سفلية. ولاستعادة القائمة المشحونة، أفرغوا المربع واحفظوا.

أزرار شريط الأدوات لكل دور

  1. اذهبوا إلى DXPR Studio > DXPR Builder > ملفات تعريف المستخدم (/admin/dxpr_studio/dxpr_builder/profile) وانقروا تحرير بجانب الملف الخاص بالدور.
  2. وسّعوا أزرار محرر النصوص (التحرير المباشر). حدّدوا الأزرار للنص الذي تحرّرونه على الصفحة.
  3. وسّعوا أزرار محرر النصوص (تحرير النافذة). حدّدوا الأزرار لمربعات النصوص في مربع حوار الإعدادات.
  4. انقروا حفظ.

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

ما الذي ترونه

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

شريط أدوات النصوص الخاص بعنصر نص الذي يقرأ زر الأنماط فيه Lead، فوق الفقرة التي فيها المؤشر، وهي مضبوطة الآن بنمط Lead الأكبر فوق فقرة عادية

يحفظ المحرّر العنصر وفئاته في HTML الخاص بالصفحة، فيرى الزوار المظهر نفسه. ولا ينشط نمط الكتلة إلا في عنصره الخاص: يحتاج Sassy Title المؤشر في عنوان من المستوى 1.

الإعدادات

تظهر الأزرار الـ 36 كلها في المجموعتين. ويبدأ ملف جديد محددًا هذه:

الزر الاسم الآلي افتراضي المباشر افتراضي النافذة
AI Assistant، AI Tone of Voice aiAgentButton، aiAgentToneButton نعم نعم
Bold، Italic bold، italic نعم نعم
Underline، Strike through underline، strikethrough نعم
Superscript، Subscript superscript، subscript نعم
Remove format removeFormat نعم نعم
Text color fontColor نعم نعم
Background color fontBackgroundColor
Font size fontSize نعم نعم
Font family fontFamily
HTML block format heading نعم نعم
Font style (قائمة الأنماط) style نعم نعم
Align left، Center، Align right، Justify alignment:left، alignment:center، alignment:right، alignment:justify نعم نعم
Insert/Remove Bullet list bulletedList نعم نعم
Insert/Remove Numbered list numberedList نعم
Outdent، Indent outdent، indent نعم
Block quote blockQuote نعم
Link، Image، Table link، insertImage، insertTable نعم نعم
Horizontal rule، Character map horizontalLine، specialCharacters نعم
Source code، Show blocks sourceEditing، showBlocks نعم
Select all، Replace، Accessibility help selectAll، findAndReplace، accessibilityHelp
Undo، Redo undo، redo نعم نعم

يحصل المستخدمون الذين لا تطابق أدوارهم أي ملف مفعّل على أشرطة الأدوات المدمجة. فالمباشر هو Bold وItalic وRemove format وHTML block format وFont style والقائمتان وLink وImage وTable وUndo وRedo. ويضيف شريط النافذة أزرار التسطير والشطب والأسطر العلوية والسفلية والمحاذاة والمسافات البادئة والألوان والأحجام. ويضيف أيضًا Block quote وHorizontal rule وCharacter map وSource code وShow blocks. وعند تفعيل الذكاء الاصطناعي، يحصل كلاهما على زري الذكاء الاصطناعي.

Font family تعرض خطوط الويب الآمنة المعيارية في CKEditor، لا خطوط قالبكم.

إذا لم تروا نمطكم

  • تعرض قائمة الأنماط الأنماط المشحونة فقط. سطر واحد يكسر الصيغة، أو يجلس سطر فارغ بين نمطين، فيتجاهل DXPR Builder القائمة كلها. صحّحوها ضمن محرر النصوص في /admin/dxpr_studio/dxpr_builder/settings واحفظوا.
  • نمطكم رمادي. لا يعمل نمط الكتلة إلا في عنصره الخاص: يحتاج h1.sassy-title إلى عنوان من المستوى 1. غيّروا الكتلة بقائمة العناوين أولًا، أو عرّفوا النمط لـ p.
  • لا يوجد زر أنماط على شريط الأدوات. يحمل ملف المحرّر Font style غير محدد. حدّدوه في مجموعتي الأزرار في /admin/dxpr_studio/dxpr_builder/profile.
  • يُطبَّق النمط، لكن النص يبدو متماثلًا. لا يحمل القالب CSS للفئة، أو Bootstrap 5 غير محمّل. أضيفوا القاعدة إلى القالب، أو اضبطوا تحميل ملفات Bootstrap جانبيًا على Bootstrap 5 ضمن Bootstrap على صفحة الإعدادات العامة.
  • يرى المحرّرون النمط، والزوار لا. تطبيق مرشّحات صيغة النص على محتوى الواجهة مفعّل ضمن مرشّحات النصوص، وصيغة نص الحقل تزيل سمات class. أغلقوا الخيار، أو امنحوا الحقل صيغة تحافظ على الفئات؛ انظر الزوار يرون شيئًا مختلفًا.

ما الخطوة التالية؟