اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۴/۱/۷
با درود خدمت دوستان و شادباش برای سال نو و جشن نوروز سال 1394
برای اضافه کردن دکمه به اديتور جديد مای بی بی هرجایی روشی داده شده ولی در آزمایش های من چیزی دست کاربران را نگرفته و به همین خاطر در صدد راهی برای آن برآمدم که نتیجه ی خوبی هم داشت و به هدف رسیدم . برای اضافه کردن دکمه به ادیتور جدید (1.8.4) مای بی بی نخست تصویر و فیلم های زیر را ببینید و در صورت نیاز و علاقه مند شدن , گام های مربوطه را انجام دهید .
نقلقول: برای استفاده در نگارش 1.8.7 به اینجا بروید.
تصویر نمونه :
فیلم های نمونه :
movies.zip (اندازه: 220.45 KB / تعداد دفعات دریافت: 34)
توجه:
این روش در مای بی بی 1.8.4 انجام شده و درست کار میکند . توجه داشته باشید که پس از ایجاد دکمه , مای کد لازم را هم باید درست کنید .
گام نخست: در روت سایتتان بروید و فایل jscripts/bbcodes_sceditor.js را باز کنید و کدهای زیر پیدا کنید :
کد php: $.sceditor.command.set('video',
سپس کدهای زیر را پیش از کدهای بالا قرار دهید:
کد php: /* + Midori + */ $.sceditor.command.set('midori', { /* + Midori + */ _dropDown: function (editor, caller) { /* + Midori + */ var $content; /* + Midori + */ $content = $( /* + Midori + */ '<div>' + /* + Midori + */ '<label for="midori">' + editor._('midori') + '</label> ' + /* + Midori + */ '<input type="text" id="midori" />' + /* + Midori + */ '</div>' + /* + Midori + */ '<div><input type="button" value="' + editor._('Insert') + '" /></div>' /* + Midori + */ ); /* + Midori + */ $content.find('.button').click(function (e) { /* + Midori + */ var val = $content.find('#midori').val(); /* + Midori + */ if(val) { /* + Midori + */ editor.focus(); /* + Midori + */ editor.insert('[midori]'+val+'[/midori]'); /* + Midori + */ editor.closeDropDown(true); /* + Midori + */ e.preventDefault(); /* + Midori + */ } /* + Midori + */ }); /* + Midori + */ editor.createDropDown(caller, 'midori', $content); /* + Midori + */ }, /* + Midori + */ exec: function (caller) { /* + Midori + */ $.sceditor.command.get('midori')._dropDown(this, caller); /* + Midori + */ }, /* + Midori + */ txtExec: function (caller) { /* + Midori + */ $.sceditor.command.get('midori')._dropDown(this, caller); /* + Midori + */ }, /* + Midori + */ tooltip: 'Midori' /* + Midori + */ });
توجه:
در تمام کدهای بالا بجای midori از نام مورد نیاز خودتان استفاده کنید و خط 28 , که عنوان کلید است را با نام خودتان به پارسی نوشته و فایل را با فرمت UTF-8 ذخیره کنید .
نتیجه ی کدهای بالا می شود: [midori]http://www.midorinco.ir/[/midori]
برای حالت دوم که میتواند وارد کردن مقداری هم باشد خط 15 را با کدهای زیر جایگزین کنید:
کد php: /* + Midori + */ editor.insert('[midori='+val+']', '[/midori]');
که نتیجه میشود: [midori=200x500]http://www.midorinco.ir/[/midori] و یا [midori=20]http://www.midorinco.ir/[/midori]
گام دوم: به مسیر jscripts/sceditor/editor_themes/mybb.css بروید و فایل mybb.css را باز کنید و کدهای زیر را پیدا کنید :
کد php: /* Additional buttons (for MyBB) */ .sceditor-button-video div { background-image: url(video.png); }
و پس از کدهای بالا کدهای زیر را اضافه کنید:
کد php: /* + Midori + */ .sceditor-button-midori div { /* + Midori + */ background-image: url(midori.png); /* + Midori + */ }
گام سوم: به مسیر زیر بروید و متغیر زیر را پیدا کنید:
کنترل پنل مدیریت > قالب ها و پوسته > قالب ها > قالب مورد نظر > قالب های گروه بندی نشده > بخش codebuttons
و سپس با کدهای زیر جایگزین کنید:
توجه:
اگر میخواهید دکمه ها بهم وصل شوند از تایپ "|" خودداری کنید و اگر می خواهید جدا از دیگر دکمه ها قرار بگیرد تایپ کنید.
گام چهارم: تصویر مورد نظر خودتان را در مسیر زیر:
کد php: jscripts/sceditor/editor_themes
آپلود کنید . (برای نمونه تصویری پیوست کرده ام) ==>
midori.png (اندازه: 808 bytes / تعداد دفعات دریافت: 141)
کار تمام است . امید که بکار بیاید .
منبع : تالار میدوری
RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۴/۱/۹
اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 (نگارش نهایی)
با کمی تغییرات به نتیجه ی نهایی رسیدم که شد مطابق با تصویرهای پیوستی .
تصویرهای نمونه :
اگر خواستید کدهای زیر را استفاده کنید .
کد php: /* + Midori + */ $.sceditor.command.set('midori', { /* + Midori + */ _dropDown: function (editor, caller) { /* + Midori + */ var $content; /* + Midori + */ $content = $( /* + Midori + */ '<div>' + /* + Midori + */ '<label for="midori">' + editor._('میدوری') + '</label> ' + /* + Midori + */ '<input type="text" id="midori" />' + /* + Midori + */ '</div>' + /* + Midori + */ '<div>' + /* + Midori + */ '<label for="link">' + editor._('آدرس لینک:') + '</label> ' + /* + Midori + */ '<input type="text" id="midoriurl" value="http://" />' + /* + Midori + */ '</div>' + /* + Midori + */ '<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>' /* + Midori + */ ); /* + Midori + */ $content.find('.button').click(function (e) { /* + Midori + */ var val = $content.find('#midori').val(); /* + Midori + */ midoriurl = $content.find('#midoriurl').val(); /* + Midori + */ if(val) { /* + Midori + */ editor.focus(); /* + Midori + */ editor.insert('[midori='+val+']'+midoriurl+'[/midori]'); /* + Midori + */ editor.closeDropDown(true); /* + Midori + */ e.preventDefault(); /* + Midori + */ } /* + Midori + */ }); /* + Midori + */ editor.createDropDown(caller, 'midori', $content); /* + Midori + */ }, /* + Midori + */ exec: function (caller) { /* + Midori + */ $.sceditor.command.get('midori')._dropDown(this, caller); /* + Midori + */ }, /* + Midori + */ txtExec: function (caller) { /* + Midori + */ $.sceditor.command.get('midori')._dropDown(this, caller); /* + Midori + */ }, /* + Midori + */ tooltip: 'میدوری' /* + Midori + */ });
باقی ماجرا هم همان است که در پست نخست توضیح دادم .
پرسش ها را در همین موضوع پاسخ خواهم داد و برای استفاده ی همگان از پرسش های خصوصی خودداری کنید .
RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - reyhane - ۱۳۹۴/۲/۱۷
سلام.
ممنون از آموزش خوبتون.
چجوری میشه به پاسخ سریع هم دکمه اضافه کرد؟
RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۴/۲/۱۷
(۱۳۹۴/۲/۱۷، ۲۱:۲۴:۰۶ عصر)reyhane نوشته است: سلام.
ممنون از آموزش خوبتون.
چجوری میشه به پاسخ سریع هم دکمه اضافه کرد؟
درود بر شما
اگر از این پلاگین استفاده کردید . به مسیر قالب های سراسری و codebutquick بروید و متغیر زیر را پیدا کنید:
و بجای آن متغیر زیر را وارد کنید تا دکمه ی شما ظاهر شود.
اگر هم از پلاگین استفاده نکردید راه کار به همین صورت خواهد بود .
RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - ashpazkhanoom - ۱۳۹۵/۴/۱۶
سلام
بابت آموزش خیلی ممنونم
ببخشید من طبق آموزش پیش رفتم. چندین و چند بار هم از اول مرور کردم و همه چیز طبق آموزش بود.
من مای کد آپارات رو ساختم و میخواستم که متصل به این دکمه ی ساخته شده بشه.
همه چیز به نظر درست میاد اما هرکاری که میکنم وقتی روی دکمه در ادیتور کلیک کرده و یک مقداری رو دارد میکنم با کلیک بر روی دکمه وارد کردن هیچ چیزی به متن وارد نمیشه.
ممنون میشم راهنماییم کنید
RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - saeed_same - ۱۳۹۵/۴/۱۷
آموزش رو کامل انجام ندادین چون بصورت عالی عمل میکنه
نمونه :
http://forum.parsiandownload.net/thread-5474.html
همچنین مای کد آپارات رو از این اموزش انجام بدین
http://community.mybbiran.com/thread-12941.html?highlight=%D8%A2%D9%BE%D8%A7%D8%B1%D8%A7%D8%AA
RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۵/۵/۱۶
با درود
بدلیل از کار افتادن کدها در نگارش 1.8.7 . اقدام به نوشتن کدهای جدید کردم که بجای کدهای پیشین از کدهای زیر استفاده کنید
کد php: /************************ * Adding Button Begin* ************************/ /* + Midori + */$.sceditor.command.set("midori", { /* + Midori + */_dropDown: function (editor, caller) { /* + Midori + */var $content; /* + Midori + */$content = $( /* + Midori + */'<div>' + /* + Midori + */'<label for="midori">' + editor._('میدوری') + ':</label> ' + /* + Midori + */'<textarea type="text" id="midori" />' + /* + Midori + */'</div>' + /* + Midori + */'<div><input type="button" value="' + editor._('Insert') + '" /></div>' /* + Midori + */); /* + Midori + */setTimeout(function() { /* + Midori + */$content.find('#midori').focus(); /* + Midori + */},100); /* + Midori + */$content.find('.button').click(function (e) { /* + Midori + */var val = $content.find('#midori').val(), /* + Midori + */before = '[midori]', /* + Midori + */end = '[/midori]'; /* + Midori + */if (val) { /* + Midori + */before = before + val + end; /* + Midori + */end = null; /* + Midori + */} /* + Midori + */editor.insert(before, end); /* + Midori + */editor.closeDropDown(true); /* + Midori + */e.preventDefault(); /* + Midori + */}); /* + Midori + */editor.createDropDown(caller, 'insertmidori', $content); /* + Midori + */}, /* + Midori + */exec: function (caller) { /* + Midori + */if ($.trim(this.getRangeHelper().selectedRange())) { /* + Midori + */this.insert('[midori]', '[/midori]'); /* + Midori + */return; /* + Midori + */} /* + Midori + */$.sceditor.command.get('midori')._dropDown(this, caller); /* + Midori + */}, /* + Midori + */txtExec: ['[midori]', '[/midori]'], /* + Midori + */tooltip: "میدوری" /* + Midori + */}); /************************ * Adding Button End* ************************/
و بسیاری از دوستانی که آپارات را میخواهند اضافه کنند از کدهای زیر استفاده کنند
کد php: /************************ * Adding Aparat Begin* ************************/ /* + Midori + */$.sceditor.command.set("aparat", { /* + Midori + */_dropDown: function (editor, caller) { /* + Midori + */var $content; /* + Midori + */$content = $( /* + Midori + */'<div>' + /* + Midori + */'<label for="aparat">' + editor._('کُد آپارات') + ':</label> ' + /* + Midori + */'<textarea type="text" id="aparat" />' + /* + Midori + */'</div>' + /* + Midori + */'<div><input type="button" value="' + editor._('Insert') + '" /></div>' /* + Midori + */); /* + Midori + */setTimeout(function() { /* + Midori + */$content.find('#aparat').focus(); /* + Midori + */},100); /* + Midori + */$content.find('.button').click(function (e) { /* + Midori + */var val = $content.find('#aparat').val(), /* + Midori + */before = '[aparat=360,640]', /* + Midori + */end = '[/aparat]'; /* + Midori + */if (val) { /* + Midori + */before = before + val + end; /* + Midori + */end = null; /* + Midori + */} /* + Midori + */editor.insert(before, end); /* + Midori + */editor.closeDropDown(true); /* + Midori + */e.preventDefault(); /* + Midori + */}); /* + Midori + */editor.createDropDown(caller, 'insertaparat', $content); /* + Midori + */}, /* + Midori + */exec: function (caller) { /* + Midori + */if ($.trim(this.getRangeHelper().selectedRange())) { /* + Midori + */this.insert('[aparat]', '[/aparat]'); /* + Midori + */return; /* + Midori + */} /* + Midori + */$.sceditor.command.get('aparat')._dropDown(this, caller); /* + Midori + */}, /* + Midori + */txtExec: ['[aparat]', '[/aparat]'], /* + Midori + */tooltip: "آپارات" /* + Midori + */}); /************************ * Adding Aparat End* ************************/
امید که بکار بیاید.
منبع: تالار میدوری
|