[شرح] : شرح التعامل مع خصائص المحرر الجديد CKeditor في النسخ 4.1.4 وكافة تنسيقاته

[haytham ali]

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

تحية طيبة للجميع

مع ظهور النسخة الجديدة vb 4.1.4

ظهر لنا المحرر الجديد للمواضيع والمشاركات CKeditor

وهو محرر رائع جدا ومميز بكامل محتوياته

وقد كتب الاخوان عدة مواضيع عن كيفية التعامل مع أزرار وأوامر المحرر الجديد

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

وشرح بالصور لكل مكان فيه مع توضيح عمل كود CSS بإضافة وسم توضيحي قبله

طبعا جميع هذه الأكواد سوف نضعها في قالب additional.css

مصطلحات سوف ندرجها في الأكواد يجب التعرف عليها :

background-color : لون الخلفية
background-image : صورة الخلفية
background-repeat : تكرار صورة الخلفية
repeat : تكرار عمودي وأفقي
repeat-x : تكرار أفقي
repeat-y : تكرار عمودي
transparent : شفاف
border : الحدود
solid : مصمت أو متواصل بدون تقطيع
opacity : درجة الشفافية
hover: عند مرور الماوس
height : الارتفاع
width: العرض
margin: الهامش الخارجي
color: اللون
font: الخط
blod: غامق
font-size: حجم الخط


ويوجد المزيد من أكواد CSS التي يمكنك استخدامها مع المحرر أو غيره

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

نبدأ الآن بحول الله وقوته

رمز PHP:

/* خصائص الحد الخارجي للمحرر */
.cke_skin_kama
{
background-color: #eeeeee !important;
border:1px #cccccc solid !important;
}

مكانه بالصورة :




رمز PHP:

/* خلفية جسم المحرر بالكامل من الخارج (body) */
.cke_skin_kama .cke_wrapper

{
background-color: #transparent !important;
font: bold 12pt Arial !important;
}

مكانه بالصورة :



رمز PHP:

/* خلفية جسم المحرر بالكامل من الداخل (body) */
.cke_skin_kama .cke_editor,
.cke_editor

{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/body-in.png') repeat-x !important;
border:1px #FFFFFF solid !important;
font: bold 12pt Arial !important;
}

مكانه بالصورة :




رمز PHP:

/* خلفية المحرر في حالة استخدام المحرر البسيط */
.texteditor.content .cke_skin_kama,
.texteditor.content .cke_skin_kama textarea.cke_source,
.texteditor textarea {
font: {vb:stylevar content_msg_font} !important;
background-color: #FFFFFF !important;
}

مكانه بالصورة :



رمز PHP:

/* لون الازرار في الحالة الاعتيادية + زر حفظ واسترجاع */
.cke_skin_kama .cke_button a.cke_off
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}

مكانه بالصورة :



رمز PHP:

/* لون الازرار في حالة مرور الماوس + زر حفظ واسترجاع */
.cke_skin_kama .cke_button a.cke_off:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}

مكانه بالصورة :



رمز PHP:

/* لون الازرار في حالة التفعيل */
.cke_skin_kama .cke_button a.cke_on
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-on.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}

مكانه بالصورة :



رمز PHP:

/* لون الازرار في حالة التفعيل عند مرور الماوس */
.cke_skin_kama .cke_button a.cke_on:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
background-repeat: repeat-x !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
}

مكانه بالصورة :



رمز PHP:

/* خلفية مجموعة الأزرار الداخلي */
.cke_skin_kama .cke_browser_gecko .cke_toolbar
{
background: transparent tnone !important;
}

مكانه بالصورة :



رمز PHP:

/* خصائص حدود الازرار من الخارج */
.cke_skin_kama .cke_toolgroup
{

background-color: #ff0000 !important;
background-image: none !important;
margin:3px !important;
}

مكانه بالصورة :



رمز PHP:

/* القوائم المنسدلة - الخلفية بالكامل - العنوان فقط */
.cke_skin_kama .cke_rcombo a
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons.png') !important;
background-repeat: repeat !important;
filter: alpha(opacity=100) !important; /* IE */
opacity: 1.00 !important; /* Safari, Opera and Mozilla */
border: 1px #adadad solid !important;
max-hight:24px !important;
margin-top:5px !important;
}

مكانه بالصورة :




رمز PHP:

/* القوائم المنسدلة - الخلفية بالكامل عند مرور الماوس- العنوان فقط */
.cke_skin_kama .cke_rcombo a:hover
{
background-image: url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') !important;
}

مكانه بالصورة :



رمز PHP:

/* نص القوائم المنسدلة - العنوان فقط */
.cke_skin_kama .cke_rcombo .cke_text
{
color: #666666 !important;
background-image: none !important;
font: bold 11px Tahoma !important;
margin-top:2px !important;
}

+


رمز PHP:

/* نص القوائم المنسدلة في حالة الاختيار ومرور والماوس - العنوان فقط */
.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_text,
.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_text,
.cke_skin_kama .cke_rcombo .cke_off a:active .cke_text,
{
background-color: transparent !important;
background-image: none !important;
color: #222222 !important;
}

مكانه بالصورة :



رمز PHP:

/* القوائم المنسدلة - الأسهم الجانبية */
.cke_skin_kama .cke_rcombo .cke_openbutton
{
background-color: transparent !important;
background-image: none !important;
}

مكانه بالصورة :



رمز PHP:

/* النوافذ المنبقة - الجسم بالكامل */
.cke_skin_kama .cke_dialog_body
{
background-color: #cccccc !important;
border: 1px #adadad solid !important;
}

مكانه بالصورة :




رمز PHP:

/* النوافذ المنبقة - الجسم الداخلي*/
.cke_skin_kama .cke_dialog_contents

{
background-color: #eeeeee !important;
border: 1px #cdcdcd solid !important;
}

مكانه بالصورة :



رمز PHP:

/* النوافذ المنبقة - الهيدر أو العنوان */
.cke_skin_kama .cke_dialog_title
{
background-image: url('{vb:stylevar imgdir_misc}/ck/popup-header.png') !important;
background-repeat: repeat-x !important;
border: 1px #adadad solid !important;
color: #333333 !important;
padding: 6px 5px 2px 0px !important;
font: bold 15px Arial !important;
}

مكانه بالصورة :




رمز PHP:

/* النوافذ المنبقة - القسم السفلي - الفوتر*/
.cke_skin_kama .cke_dialog_footer
{
background-image: url('{vb:stylevar imgdir_misc}/ck/popup-header.png') !important;
background-repeat: repeat-x !important;
border: 1px #adadad solid !important;
color: #333333 !important;
font: bold 15px Arial !important;
}

مكانه بالصورة :



رمز PHP:

/* النوافذ المنبقة - خصائص زر إغلاق في الأعلى على اليسار */
.cke_skin_kama .cke_dialog .cke_dialog_body .cke_dialog_close_button
{
position: absolute !important;
top: 10px !important;

}

مكانه بالصورة :



ملاحظة :

خلفية زر إغلاق يتم تغييرها من الصورة على هذا المسار :

رمز PHP:

client^_*^_*^_*^_*^_*^_*/ckeditor/skins/kama/images/sprites.png

رمز PHP:

/* النوافذ المنبقة - تنسيق زر إلغاء وموافق */
.cke_skin_kama a.cke_dialog_ui_button_cancel,
.cke_skin_kama a.cke_dialog_ui_button_ok




{
border: 1px #CCCCCC solid !important;
}

+

رمز PHP:

/* النوافذ المنبقة - نص زر إلغاء وموافق */
.cke_skin_kama a.cke_dialog_ui_button_cancel span,
.cke_skin_kama a.cke_dialog_ui_button_ok span
{
font: bold 11px Tahoma !important;
}

مكانه بالصورة :



ملاحظة :

خلفية زر موافق وإلغاء يتم تغييرها من الصورة على هذا المسار :

رمز PHP:

client^_*^_*^_*^_*^_*^_*/ckeditor/skins/kama/images/sprites.png

رمز PHP:

/* النوافذ المنبقة - التبويب العلوي */
.cke_skin_kama a.cke_dialog_tab
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/buttons.png') repeat-x !important;
background-repeat: repeat !important;
border: 1px #adadad solid !important;
color: #333333 !important;
font: bold 11px Tahoma !important;
margin: 1px !important;
}

مكانه بالصورة :



رمز PHP:

/* النوافذ المنبقة - التبويب العلوي عند مرور الماوس*/
.cke_skin_kama a:hover.cke_dialog_tab
{
background:#eeeeee url('{vb:stylevar imgdir_misc}/ck/buttons-h.png') repeat-x !important;
background-repeat: repeat !important;
}

مكانه بالصورة :


رمز PHP:

/* خصائص القوائم المنسدلة في النوافذ المنبقة */
.cke_panel_grouptitle,
.cke_skin_kama .cke_dialog_ui_input_select
{
background-color: #f7f7f7 !important;
background-image: none !important;
color: #222222 !important;
}

مكانه بالصورة :




هكذا انتهينا من أكثر الأماكن شيوعا في محرر CKeditor الجديد بفضل الله سبحانه وتعالى


-------------------------------------------------------------------

الآن نأتي لبعض الإضافات التي يمكنك استخدامها في الصندوق

1- صندوق الابتسامات في الأسفل مع الشكل الحالي كما في الصورة التالية :




طريقة عمل هذا الصندوق هو كالتالي :

أولا يوجد في المرفقات برودكت استورده من لوحة التحكم

ثم توجه الى : الستايلات والقوالب - التحكم بالستايلات

ومن جوار الستايل المطلوب اختر : متغيرات الستايل

ثم اذهب

الان نبحث عن المتغير : editor_smiliebox_smiliesize

ونجعل الحجم 50 ونختار الواحدات px

ونحفظ

ثم نتوجه إلى قالب editor2.css

ونستبدل محتواه بالمرفق editor2.css
ثم نحفظ

الان نتوجه الى قالب : editor_smilie

ونستبدل محتواه بالقالب المرفق editor_smilie

ثم نتوجه إلى الاعدادات - الخيارات

ونختار الاعداد :خيارات واجهة إرسال الرسائل والمشاركات
ونضع الاعدادات التالية :


إجمالي الابتسامات في صندوق الابتسامات : 30

عدد الابتسامات بكل سطر من صندوق الابتسامات : 15
تفعيل الابتسامات أسفل محرر الكتابة : نعم
إضافة صندوق الابتسامات في الرد السريع : لا
عدد صفوف الابتسامات : 2
ثم نحفظ

وهكذا سيظهر الصندوق الخاص بالابتسامات مثل ماهو في الصورة السابقة


-------------------------------------------------------------------



2- تعريب النافذة المنبثقة الخاصة بإدراج صورة من رابط URL
لأن تعريب لغة المنتدى لايشمل هذه النقطة

وهذه صورته بعد التعريب


الطريقة كالتالي :

يوجد في المرفقات ملف اسمه image.js

نستبدله مع مثيله على هذا المسار

رمز PHP:

client^_*^_*^_*^_*^_*^_*/ckeplugins/vbimage/dialogs/image.js

وهكذا انتهينا من التعريب


-------------------------------------------------------------------


3- لمن يريد شكل صندوق الرد كما هو في الصور السابقة

يوجد في المرفقات مجلد صندوق الرد بداخله التالي :

ملف اسمه : additional

ينسخ محتواه الى القالب additional.css

ايضا يوجد مجلد للصور اسمه ck

يرفعه بالكامل الى مجلد misc الخاص بالستايل الذي يريد
تعديل شكل الصندوق فيه

ايضا يوجد صورة اسمها sprites.png

يستبدلها مع الصورة على هذا المسار

رمز PHP:

client^_*^_*^_*^_*^_*^_*/ckeditor/skins/kama/images/sprites.png

في النهاية لا أطلب منكم سوى الدعاء لوالدي ووالدتي
أطال الله في عمرهما ومتعهما بموفور الصحة والعافية

هذا وصلى الله وبارك على خاتم الأنبياء والمرسلين
سيدنا وحبيبنا محمد عليه أفضل الصلاة وأتم التسليم

محبــــــكم / أبو عبدالعزيز ( المـ،،،ـافـر )
منتديات الواحة





الملفات المرفقة مرفقات الموضوع بالكامل.zip (42.5 كيلوبايت)


موقع بنات مصر موقع منوع تجدون به اقسام العاب و طبيب

هذه المشاركة تأتيكم من قسم تطوير المواقع تطوير مواقع