مرجع پارسی MyBB

درود نکات تکمیلی برای آموزش افزودن mycode به ckeditor
نکات اولیه برگرفته از
http://community.mybbiran.com/thread-148...14447.html
[تصویر: user.png]

نویسنده:jan123
اموزش افزودن مای کد پیشرفته:
ما می خوایم توی این آموزش یاد بدیم که چجوری یه دکمه به ویرایشگر اضافه کنیم تا با کلیک بر روی اون یه کد مثل
[img src="" alt="" title=""][/img]
رو به متن اضافه کنه.
خوب برای اینکار باید برای ویرایشگر یه پلاگین بنویسیم.
خوب حالا در مسیر MYBBRooT/ckeditor/plugins یه پوشه مثلا به نام img ایجاد می کنیم.
حالا توی این پوشه یک فایل به نام plugin.js با محتویات زیر می سازیم.

کد php: 
CKEDITOR.plugins.add( 'img', {
    icons: 'img',
    init: function( editor ) {
        editor.addCommand( 'img', new CKEDITOR.dialogCommand( 'imgDialog' ));
        editor.ui.addimg( 'img', {
            label: 'افزودن تصویر پیشرفته',
            command: 'img',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add( 'imgDialog', this.path + 'dialogs/img.js' );
    }

}); 

خوب.
حالا در همین پوشه یه پوشه به نام icons می سازیم و یه عکس 16 در 16 به نام img.png برای آیکن دکمه ایجاد می کنیم.
حالا در همین پوشه یه پوشه به نام dialogs می سازیم
حالا توی این پوشه یک فایل به نام img.js با محتویات زیر می سازیم.(img=نام mycode ودکمه)

کد php: 
CKEDITOR.dialog.add( 'imgDialog', function ( editor ) {
    return {
        title: 'افزودن تصویر',
        minWidth: 500,
        minHeight: 140,

        contents: [
            {
                id: 'tab-basic',
                label: 'افزودن تصویر',
                elements: [
                    // UI elements of the first tab will be defined here
                    {
                        type: 'html',
                        html: '<p>آدرس تصویر:</p>'
                    },                    
                    {
                        type: 'text',
                        id: 'adres',
                        style: 'width:95px'
                    },
                    {
                        type: 'html',
                        html: '<p>توزیحات تصویر:</p>'
                    },
                    {
                        type: 'textarea',
                        id: 'title',
                    },
                                        {
                        type: 'html',
                        html: '<p>متن جایگزین  تصویر:</p>'
                    },
                    {
                        type: 'textarea',
                        id: 'alt',
                    },
                    {
                        type: 'html',
                        html: '<p>By: <a href="http://www.amddr.ir" target="_blank">amdddr.ir</a></p>'
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;
            editor.insertText( '[img src="'+dialog.getValueOf( 'tab-basic', 'adres' )+'" alt="'+dialog.getValueOf( 'tab-basic', 'alt' )+'" title="'+dialog.getValueOf( 'tab-basic', 'title' )+'"][/img]' );
        }
    };
}); 

خوب توزیحات:عبارت

کد php: 
CKEDITOR.dialog.add( 'imgDialog', function ( editor ) 

یک دیالوگ به ادیتور به نام imgDialog و محتویات موجوداضافه میکنه.
img نام دکمه (مای کد ) هست.
عبارت

کد php: 
    title: 'افزودن تصویر',
        minWidth: 500,
        minHeight: 140, 

به ترتیب توزیحات تصویر دکمه
عرض دکمه
طول دکمه
رو می گه
عبارت های موجود در تگ المنت مثل

کد php: 
            {
                        type: 'html',
                        html: '<p>آدرس تصویر:</p>'
                    }, 

عبارت های موجود در داخل کادر بازشده رو نشان می دهند مثل اول یک عبارت html با محتوای

کد: 
                    <p>آدرس تصویر:</p>

رو نشانمیدهد
type نوع عبارت(در اینجاhtml)
وhtml عبارت موجود را نشان میدهد
بعد آن کد

کد php: 
                    {
                        type: 'text',
                        id: 'adres',
                        style: 'width:95px'
                    }, 

یک کادر با فرمت تکست(کادر تکست کوچک) وبا آی دی adres و استایل عرض =95px باز میکند.
نحوه استفاده از این کادر ها:
این عبارت:

کد php: 
                                editor.insertText( '[img src="'+dialog.getValueOf( 'tab-basic', 'adres' )+'" alt="'+dialog.getValueOf( 'tab-basic', 'alt' )+'" title="'+dialog.getValueOf( 'tab-basic', 'title' )+'"][/img]' ); 

می گه یک کد به ادیتور به محتوای زیر اضافه کن

کد php: 
                                [img src="'+dialog.getValueOf( 'tab-basic', 'adres' )+'" alt="'+dialog.getValueOf( 'tab-basic', 'alt' )+'" title="'+dialog.getValueOf( 'tab-basic', 'title' )+'"][/img] 

این یعنی اول یک
[img src=
بعد محتوای داخل یکی از کادر ها به آیدی adres موجود در عبارتی به آیدیtab-basic رو اضافه کن و...
تمرین و کنجکاوی باعث یادگیری میشود.

حالا در مسیر MYBBRooT/inc/plugins فایلmybbirckeditor.php رو باز کرده.
و کد زیر رو پیدا کنید:

کد php: 
$codebuttons .= "magicline,code,videos', 

به کد زیر تبدیل کنید:

کد php: 
$codebuttons .= "img,magicline,code,videos', 

حالا در مسر تنظیمات پلاگین، تنظیم کدهای تولبار ویرایشگر رو پیدا کنید
و کد زیر رو بیابید:

کد php: 
[ 'Link', 'Unlink', '-', 'Image', 'Smiley'], 

و به کد زیر تبدیل کنید:

کد php: 
[ 'Link', 'Unlink', '-', 'Image', 'Smiley', '-', 'img'], 

تموم شد .
منبع:mybbiran-amddr.ir

یه عالمه نوشته بودم یه دفه صفحم رفرش شد همه پریدن Sad

با توجه به آموزش بالا امکان داره یک دکمه به ادیتور اضافه کنیم که وقتی دکمه رو زدیم یه کادر بیاد که از اون طریق بتونیم فایل هاونو در آپلود سنتر آپلود کنیم ؟

اینم کدی که مال آپلود سنتره

کد php: 
<table style="BACKGROUND-COLOR: #ffffff" cellSpacing="0" cellPadding="0" width="100" align="center" height="315">
<tr>
<td bgColor="#2591E1" height="28" background="http://www.uplodha.ir/uploads/2591E1-gif.gif">
<p dir="rtl" align="right"><font color="#ffffff" face="Tahoma"><span style="FONT-SIZE: 9pt">آپلود فایل و تصاویر اعضا</span></font></td>
</tr>
<tr>
<td style="BORDER-BOTTOM: #2591E1 1px solid; BORDER-LEFT: #2591E1 1px solid; BORDER-TOP: #2591E1 1px solid; BORDER-RIGHT: #2591E1 1px solid" bgColor="#ffffff">
<center>
<img border="0" align="center" src="http://www.uplodha.ir/uploads/Upload-icon-png.png" width="96" height="96" alt="آپلود عکس"></a>
<form action="adress upoad center" target="_blank" method="post" enctype="multipart/form-data" name="phuploader"> 
<table align="center"> 
<input type="file" name="file_1_" id="file_1_"  size="10" /> 
<input type="file" name="file_2_" id="file_2_"  size="10" /> 
<input type="file" name="file_3_" id="file_3_"  size="10" /> 
<input type="hidden" name="submit" value="true" /></tr>&nbsp;&nbsp;&nbsp;<tr> 
<center><input style="width: 125px; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; font-family: tahoma; color: white; cursor: pointer; border: 0px none; margin: 5px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 9px; background: #2591E1 url('http://www.uplodha.ir/uploads/2591E11.gif') no-repeat left top" type="submit" id="submitr" name="submitr" value=" آپلود فایل " /></center> &nbsp; 
</tr> 
</table> 
</form></center>
<p style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px" align="center"><font face="Tahoma" style="font-size: 10pt"><span style="font-size: tahoma"><a target="_blank" href="http://wle.ir/up/ucp.php?go=register"><span style="text-decoration: none"><font color="#000000">عضویت در آپلود سنتر</font></span></a></span><span lang="en-us"><span style="font-size: tahoma"><br></span></p>
</td>
</tr>
</table></center> 

البته در پست ساختن منو ثابت از همین کد در نوار ثابت استفاده کردیم که خیی جالب بود ولی مشکلاتی داشت . Undecided

مثل زالو چسپیدم به انجمن Big Grin

هی سوال می پرسم همین روزاست که اخراج شم Tongue

داداش الان انجمن من با ckeditor مشکل داره نمیتونم از این آموزش استفاده کنم؟ Sad

اقا صالح مشکلت چیه ؟ زیر ادیتورت کلی نوشته میاد ؟ افزونه پیام خصوصی اجاکس رو غیر فعال کن
ادیتور اصلا نمایش داده نمیشه ؟ هرچی ادیتور داری غیرفعال کن بعد ادیتور رو دانلود کن و در روت انجمن بریز و از حالت فشرده خارج کن تا بصورت صحیح نصب بشه . چه مشکلی داری Big Grin

همه ی این کارها رو کردم

مشکل اینه که برای مدیر (خودم )همون ادیتور معمولی رو نشون میده که دکمه هاش کار نمیکنه ولی برای بقیه ckeditor رو نشون میده کلی مشکل دیگه هم بودش یادم نمیاد میترسم که ادیتور رو دست بزنم آخر سر خودمم نفهمیدم چیکار کردم که درست شده و همین ادیتور دیفالت جواب داده برام

الان ادیتور خود مای بی بی ایران چیه؟

سلام من افزونه بانک رو خریدم ولی هنوز نتونستم نصبش کنم ( Angry

بله عصبانیم پشتیبانی خیلی خیلی ضعیفه Angry

)

خب بگذریم . حالا من به امید این که بتونم نصبش کنم طبق این آموزش ها یه دکمه به ادیتورم اضافه کردم Smile

تقریبا مثل دکمه این انجمن کار می کنه حتی بهترم هست Cool

دانلود دکمه بانک 1.5

خب حالا من یک سوال فنی داشتم اگه حل بشه خیلی خوبه اگر حل هم نشه زیاد مهم نیست چون حتی کلید همین انجمن هم این مشککل رو داره Big Grin

وقتی رو کلیدش می زنی یه کادر میاد بالایش یه قسمت کوچیک برای وارد کردن قیمت و پایینش یه کادر بزرگ تر برای تایپ متن داره .

مشکلم اینه که تو کادر کوچیکه قیمت میشه حروف هم نوشت . من میخوام توش فقط اعداد نوشته بشه و نشه از حروف استفاده کرد Smile

کد php: 
CKEDITOR.dialog.add( 'payment', function ( editor ) {
    return {
        title: 'قیمت گذاری روی مطلب',
        minWidth: 500,
        minHeight: 140,

        contents: [
            {
                id: 'tab-basic',
                label: 'افزودن دکمه',
                elements: [
                    // UI elements of the first tab will be defined here
                    {
                        type: 'html',
                        html: '<p>مطلب خود را در کادر زیر بنویسید:</p>'
                    },                    
                    {
                        type: 'text',
                        id: 'title',
                        style: 'width:95px'
                    },
                    {
                        type: 'html',
                        html: '<p>: ( تومان) قیمت مطلب را وارد کنید</p>'
                    },
                    {
                        type: 'textarea',
                        id: 'adres',
                        'default': 
                    },
                    {
                        type: 'html',
                        html: '<p>می توانید دکمه پذیرش را بزنید و در ادیتور مطلب خود را وارد کنید</a></p>'
                    }
                ]
            }
        ],
        onOk: function() {
            var dialog = this;
            editor.insertText( '[payment='+dialog.getValueOf( 'tab-basic', 'adres' )+']'+dialog.getValueOf( 'tab-basic', 'title' )+'[/payment]' );
        }
    };
}); 

توی این کد

کد php: 
type: 'html',
                        html: '<p>: ( تومان) قیمت مطلب را وارد کنید</p>'
                    },
                    {
                        type: 'textarea',
                        id: 'adres',
                        'default': 

textarea همون نوع متغییر ورودی هست (؟) کداعداد چطوری تعریف میشه Huh

jan123

kamran0080

صالح غلامیان

kamran0080

صالح غلامیان

kamran0080