WYSIWYG

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

يدعم حقل WYSIWYG شروط مثل أي عنصر تحكم آخر، ويتم عرض محتواه من خلال محرك قالب بناء جملة الغصين. تحافظ قيم WYSIWYG على HTML الآمن الخاص بها تلقائيًا، لذلك نادرًا ما تحتاج إلى |raw يصفي. يشرح كلا الدليلين التفاصيل والقيود.

الاتصال هو رمز واحد. يطبع {{ your_field_name }} في لوحة HTML وعروض العلامات المخزنة هناك، يتم تصفيتها من خلالها wp_kses_post، لذلك يبقى التنسيق بينما يتم تجريد العلامات غير الآمنة. لا توجد مرشحات إضافية، ولا مفر من الجمباز.

ما يفعله حقل WYSIWYG #

• يعرض محرر النصوص الغني TinyMCE في لوحة Elementor الخاصة بالعنصر واجهة المستخدم، مع علامتي التبويب Visual وText.
• يخزن مخرجات المحرر كسلسلة HTML.
• يطبع HTML من خلال {{ your_field_name }}، مرت wp_kses_post على الإخراج.
• يحافظ على التنسيق سليمًا: يتم عرض الفقرات والخط العريض والخط المائل والقوائم والروابط والعناوين.
• يدعم القيم الديناميكية، لذلك يمكن أن يأتي المحتوى من العلامات الديناميكية حيث يوفرها الإعداد.

القطعة الأولى؟ ال نظرة عامة على منشئ القطعة يغطي أساسيات المحرر التي تعتمد عليها هذه الصفحة.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة بطاقة عضو الفريق مع حقل WYSIWYG المسمى member_bio عقد السيرة الذاتية المنسقة لكل شخص.

كيفية إضافة حقل WYSIWYG #

اسحب WYSIWYG الحقل من لوحة الحقول إلى قسم أسفل محتوى tab، المنزل الطبيعي للمحتوى الطويل. تفتح خياراته على اليسار بمجرد هبوطه.

تم شرح خيارات حقل WYSIWYG #

تظل قائمة الخيارات صغيرة لأن المحرر نفسه يحمل التعقيد

• ملصق: النص الموضح أعلاه المحرر في Elementor، على سبيل المثال “Member Bio”.
• اسم: المعرف الفريد الذي تشير إليه قوالبك. الحروف والأرقام والتسطير فقط، على سبيل المثال member_bio.
• الافتراضي: محتوى البداية، ويمكن أن يتضمن علامات. توضح الفقرة ذات التنسيق القصير للمحررين الغرض من المنطقة وتثبت نجاح التنسيق.
• ديناميكي: يقبل الحقل القيم الديناميكية، لذلك يمكن توصيل المحتوى بالعلامات الديناميكية بدلاً من كتابته يدويًا.

قم بتوصيل حقل WYSIWYG بالرمز المميز الخاص به #

حقل WYSIWYG هو حقل رمز مميز. رمز مميز واحد في لوحة HTML يضع منطقة المحتوى بأكملها

<article class="tm-card">
  <h3 class="tm-name">{{ member_name }}</h3>
  <div class="tm-bio">
    {{ member_bio }}
  </div>
</article>

عند الإخراج، تمر القيمة wp_kses_post، ينطبق عامل التصفية WordPress على محتوى النشر. العلامات التي تنتجها TinyMCE، الفقرات، القوية وem، القوائم، الروابط، العناوين، الصور، كلها موجودة في القائمة المسموح بها، لذا فإن تنسيق المحررين هو ما يعرض. أي شيء غير آمن يتسلل عبر علامة التبويب "نص"، مثل أ <script>، تم تجريده.

احترس: لا تضيف |raw إلى رمز WYSIWYG خارج العادة. الرمز المميز العادي يعرض التنسيق بالفعل، لأنه wp_kses_post يسمح بالترميز الذي يكتبه TinyMCE؛ |raw يزيل مرشح الأمان فقط دون تغيير الشكل الحيوي العادي. إذا بدا أن الإخراج قد تم الهروب منه بدلاً من عرضه، فإن السبب يكون في مكان آخر، وليس مرشحًا مفقودًا.

لف الرمز المميز في حاوية بفئة، كما في المثال، وقم بتصميم المنطقة من لوحة CSS

.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }

استخدم عنصر التحكم WYSIWYG في Elementor #

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

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

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

حالات الاستخدام الشائعة #

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

نصائح للعمل مع حقل WYSIWYG #

• طباعة الرمز العادي. {{ member_bio }} يجعل التنسيق كما هو؛ |raw يضيف المخاطر دون إضافة القدرة هنا.
• النمط من خلال فئة المجمع. هدف .tm-bio p, .tm-bio ulوالأصدقاء في لوحة CSS بدلاً من الأمل في وصول مخرجات المحرر بشكل مسبق.
• قم بتعيين الإعداد الافتراضي المنسق. يمكن استخدام السيرة الذاتية التي تحمل اسمًا غامقًا ورابطًا واحدًا كمثال مباشر لما يدعمه الحقل.
• Wysiwyg واحد لكل منطقة محتوى. قم بإعطاء المقدمة والطباعة الدقيقة حقلين منفصلين بدلاً من مطالبة المحررين بإدارة كليهما داخل محرر واحد.
• اختر الحقل الأخف عندما تستطيع ذلك. ينتمي سطر واحد غير منسق إلى حقل نص؛ الوصول إلى WYSIWYG عندما تكون الفقرات أو القوائم أو الروابط جزءًا حقيقيًا من المحتوى.
• توقع kses على الإخراج. لن تبقى العلامات المخصصة خارج القائمة المسموح بها بعد المحتوى موجودة، حسب التصميم. المقتطفات الخام القابلة لللصق هي حقل الكود'مهمة.

الأسئلة المتداولة #

إلتحاق بالركب #

يمنح حقل Widget Builder WYSIWYG المحررين تجربة الكتابة التي يعرفونها بالفعل ويمنحك رمزًا مميزًا واحدًا معقمًا لوضعه في الترميز. يقوم الأشخاص بتنسيق السير والأوصاف بصريًا؛ يعرضها عنصر واجهة المستخدم بأمان ويصممها من خلال CSS الخاص به. للحصول على مقتطفات خام قابلة للصق، استخدم حقل الكود، ولتكرار الكتل المنسقة، قم بدمج WYSIWYG مع مجال المكرر. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.