it-swarm.asia

إضافة فئات CSS إلى wysiwyg

أستخدم wysiwyg مع ckeditor ، وكنت أتساءل كيف أضيف أنماط css بحيث يمكن للمستخدم ، على سبيل المثال ، تعويم الصور إلى اليسار أو إجراء تغييرات أخرى مماثلة ...؟

شكر!

7
Jane

يستخدم Ckeditor ckeditor.styles.js ملف لتعريف الأنماط المتوفرة في قائمة الأنماط المنسدلة. توضح الوثائق في هذا الملف ما يلي:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

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

ال ckeditor.styles.js يمكن نسخ الملف إلى دليل يمكن الوصول إليه عن طريق Drupal وتعديله ليشمل أنماطك. ثم عليك تكوين ملف تعريف CKeditor الخاص بك للإشارة إلى الملف الجديد ، بما في ذلك أي CSS قابل للتطبيق.

6
nmc

بدلا من الربط في ckeditor.styles.js ، يمكننا القيام بذلك مباشرة على صفحة التكوين الخاصة بالتنسيق.

يمنحك تنسيق WYSIWYG خيارًا لأنماطك الخاصة ويمكننا ببساطة كتابة css على أساس تلك التنسيقات.

خطوات لإضافة الأنماط

  • تسجيل الدخول على الموقع كمسؤول.
  • انتقل إلى صفحة تكوين التنسيقات. (التهيئة "تأليف المحتوى" ملفات تعريف Wysiwyg)

    enter image description here

  • قم بتحرير أي تنسيق.

    enter image description here

  • افتح مجموعة CSS .

    enter image description here

  • ضمن فئات CSS textarea ، قم بإنشاء النمط الذي تريد إنشاءه. يجب أن يكون شكله

اسم النمط = html_element.class_name

مثال على ذلك

عنوان الصفحة الثابت = div.static_page_title (لذا فإن اسم النمط هو عنوان الصفحة الثابت ، والذي عند التطبيق يلتف النص في div مضيفا static_page_title كفئة عنصر div .)

خطوات استخدامه

  • حاول إنشاء محتوى واستخدم التنسيق الذي أضفت فيه النمط.
  • تحت الأنماط سترى إعدادات النمط التي قمت بإنشائها. enter image description here
  • ببساطة اكتب الاختبار وحدد النمط. بعد القيام بذلك ، سيبدو الترميز شيئًا مثل

    <div class="static_page_title">Testing</div>

  • لذا يمكننا ببساطة كتابة css لفئة static_page_title وسيعمل كل شيء كما هو متوقع.

آمل أن تكون إجابتي مفيدة

1
Nitesh Sethia