معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 1 من 1

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

  1. #1
    المشرف العام
    الصورة الرمزية HVIPS1


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 3
    الدولة: eygpt
    المشاركات: 2,778
    HVIPS1 غير متواجد حالياً

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


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

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

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

    مع ظهور النسخة الجديدة 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 التي يمكنك استخدامها مع المحرر أو غيره

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


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


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

    }

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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
    /* خلفية جسم المحرر بالكامل من الخارج (body) */
    .cke_skin_kama .cke_wrapper
    
    {
        background-color: #transparent !important;
    font: bold 12pt Arial !important;
    }


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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
    /* خلفية جسم المحرر بالكامل من الداخل (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;
    }


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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي




    كود:
    /*  خلفية المحرر في حالة استخدام المحرر البسيط */
    .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;
    }


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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
    /* لون الازرار في الحالة الاعتيادية + زر حفظ واسترجاع */ .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; }
    مكانه بالصورة :

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
    /*  لون الازرار في حالة مرور الماوس + زر حفظ واسترجاع */
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
    /*  لون الازرار في حالة التفعيل */
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


    كود:
    /*  لون الازرار في حالة التفعيل عند مرور الماوس */
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



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



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


    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    كود:
    /*  خصائص حدود الازرار من الخارج  */
    .cke_skin_kama .cke_toolgroup
    {
    
        background-color: #ff0000 !important;
        background-image: none !important;
            margin:3px !important;
    }  
    




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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
    /*  القوائم المنسدلة - الخلفية بالكامل - العنوان فقط  */
    .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;
    }


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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



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



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


    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

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


    +



    كود:
    /*   نص القوائم المنسدلة في حالة الاختيار ومرور والماوس - العنوان فقط  */
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


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



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


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

    مكانه بالصورة
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي



    كود:
     		 			 /*  النوافذ المنبقة - الجسم الداخلي*/
    
      نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي   
     
    .cke_skin_kama .cke_dialog_contents
    
    {
    


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

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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


    كود:
    /*  النوافذ المنبقة - الهيدر أو العنوان  */
    .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;
    }


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


    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


    كود:
    /*  النوافذ المنبقة - القسم السفلي - الفوتر*/
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


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



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    ملاحظة :

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


    كود:
     		 			 clientscript/ckeditor/skins/kama/images/sprites.png


    كود:
    /*  النوافذ المنبقة - تنسيق زر إلغاء وموافق  */
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    ملاحظة :

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



    كود:
     		 			 clientscript/ckeditor/skins/kama/images/sprites.png



    كود:
    /*  النوافذ المنبقة - التبويب العلوي */
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


    كود:
    /*  النوافذ المنبقة - التبويب العلوي عند مرور الماوس*/
    .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;
    }



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

    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


    كود:
    /*  خصائص القوائم المنسدلة في النوافذ المنبقة */
    .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

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



    كود:
     		 			 clientscript/ckeplugins/vbimage/dialogs/image.js

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


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


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

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

    ملف اسمه : additional

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

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

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

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

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


    كود:
     		 			 clientscript/ckeditor/skins/kama/images/sprites.png

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


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

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

    الملفات المرفقة

 

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •