مرجع پارسی MyBB

نسخه‌ی کامل: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4
شما درحال مشاهده‌ی نسخه‌ی متنی این صفحه می‌باشید. مشاهده‌ی نسخه‌ی کامل با قالب‌بندی مناسب.
با درود خدمت دوستان و شادباش برای سال نو و جشن نوروز سال 1394
برای اضافه کردن دکمه به اديتور جديد مای بی بی  هرجایی روشی داده شده ولی در آزمایش های من چیزی دست کاربران را نگرفته و به همین خاطر در صدد راهی برای آن برآمدم که نتیجه ی خوبی هم داشت و به هدف رسیدم . برای اضافه کردن دکمه به ادیتور جدید (1.8.4) مای بی بی نخست تصویر و فیلم های زیر را ببینید و در صورت نیاز و علاقه مند شدن , گام های مربوطه را انجام دهید .

نقل‌قول: برای استفاده در نگارش 1.8.7 به اینجا بروید.

تصویر نمونه :



فیلم های نمونه :
[attachment=9092]


توجه:
این روش در مای بی بی 1.8.4 انجام شده و درست کار میکند . توجه داشته باشید که پس از ایجاد دکمه , مای کد لازم را هم باید درست کنید .

گام نخست: در روت سایتتان بروید و فایل jscripts/bbcodes_sceditor.js را باز کنید و کدهای زیر پیدا کنید :

کد php:
$.sceditor.command.set('video'


سپس کدهای زیر را پیش از کدهای بالا قرار دهید:

کد php:
/* + Midori + */ $.sceditor.command.set('midori', {
/* + Midori + */ _dropDown: function (editorcaller) {
/* + 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(thiscaller);
/* + Midori + */ },
/* + Midori + */ txtExec: function (caller) {
/* + Midori + */ $.sceditor.command.get('midori')._dropDown(thiscaller);
/* + 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-imageurl(video.png);


و پس از کدهای بالا کدهای زیر را اضافه کنید:

کد php:
/* + Midori + */ .sceditor-button-midori div  {
/* + Midori + */ background-imageurl(midori.png);
/* + Midori + */ 

گام سوم: به مسیر زیر بروید و متغیر زیر را پیدا کنید:
کنترل پنل مدیریت > قالب ها و پوسته > قالب ها > قالب مورد نظر > قالب های گروه بندی نشده > بخش codebuttons

کد php:
{$code}quote

و سپس با کدهای زیر جایگزین کنید:

کد php:
{$code}quote|midori


توجه:
اگر میخواهید دکمه ها بهم وصل شوند از تایپ "|" خودداری کنید و اگر می خواهید جدا از دیگر دکمه ها قرار بگیرد تایپ کنید.

گام چهارم: تصویر مورد نظر خودتان را در مسیر زیر:


کد php:
jscripts/sceditor/editor_themes 
آپلود کنید . (برای نمونه تصویری پیوست کرده ام) ==>  [attachment=9090]
کار تمام است . امید که بکار بیاید .

منبع :  تالار میدوری
اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 (نگارش نهایی)

با کمی تغییرات به نتیجه ی نهایی رسیدم که شد مطابق با تصویرهای پیوستی .

تصویرهای نمونه :



اگر خواستید کدهای زیر را استفاده کنید .

کد php:
/* + Midori + */ $.sceditor.command.set('midori', {
/* + Midori + */ _dropDown: function (editorcaller) {
/* + 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(thiscaller);
/* + Midori + */ },
/* + Midori + */ txtExec: function (caller) {
/* + Midori + */ $.sceditor.command.get('midori')._dropDown(thiscaller);
/* + Midori + */ },
/* + Midori + */ tooltip'میدوری'
/* + Midori + */ }); 


باقی ماجرا هم همان است که در پست نخست توضیح دادم .
پرسش ها را در همین موضوع پاسخ خواهم داد و برای استفاده ی همگان از پرسش های خصوصی خودداری کنید . [تصویر:  cool.gif]
سلام.
ممنون از آموزش خوبتون.
چجوری میشه به پاسخ سریع هم دکمه اضافه کرد؟
(۱۳۹۴/۲/۱۷، ۲۱:۲۴:۰۶ عصر)reyhane نوشته است: [ -> ]سلام.
ممنون از آموزش خوبتون.
چجوری میشه به پاسخ سریع هم دکمه اضافه کرد؟


درود بر شما
اگر از این پلاگین استفاده کردید . به مسیر قالب های سراسری و codebutquick بروید و متغیر زیر را پیدا کنید:
کد php:
{$code}quote 

و بجای آن متغیر زیر را وارد کنید تا دکمه ی شما ظاهر شود.
کد php:
{$code}quote|midori
اگر هم از پلاگین استفاده نکردید راه کار به همین صورت خواهد بود . Heart
سلام
بابت آموزش خیلی ممنونم
ببخشید من طبق آموزش پیش رفتم. چندین و چند بار هم از اول مرور کردم و همه چیز طبق آموزش بود.
من مای کد آپارات رو ساختم و میخواستم که متصل به این دکمه ی ساخته شده بشه.
همه چیز به نظر درست میاد اما هرکاری که میکنم وقتی روی دکمه در ادیتور کلیک کرده و یک مقداری رو دارد میکنم با کلیک بر روی دکمه وارد کردن هیچ چیزی به متن وارد نمیشه.
ممنون میشم راهنماییم کنید
آموزش رو کامل انجام ندادین چون بصورت عالی عمل میکنه

نمونه :
http://forum.parsiandownload.net/thread-5474.html

همچنین مای کد آپارات رو از این اموزش انجام بدین

http://community.mybbiran.com/thread-129...8%A7%D8%AA
با درود
بدلیل از کار افتادن کدها در نگارش 1.8.7 . اقدام به نوشتن کدهای جدید کردم که بجای کدهای پیشین از کدهای زیر استفاده کنید
کد php:
/************************
* Adding Button Begin*
************************/
/* + Midori + */
$.sceditor.command.set("midori", {
/* + Midori + */_dropDown: function (editorcaller) {
/* + 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(beforeend);
/* + 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(thiscaller);
/* + Midori + */},
/* + Midori + */txtExec: ['[midori]''[/midori]'],
/* + Midori + */tooltip"میدوری"
/* + Midori + */});
/************************
* Adding Button End*
************************/ 

و بسیاری از دوستانی که آپارات را میخواهند اضافه کنند از کدهای زیر استفاده کنند

کد php:
/************************
* Adding Aparat Begin*
************************/
/* + Midori + */
$.sceditor.command.set("aparat", {
/* + Midori + */_dropDown: function (editorcaller) {
/* + 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(beforeend);
/* + 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(thiscaller);
/* + Midori + */},
/* + Midori + */txtExec: ['[aparat]''[/aparat]'],
/* + Midori + */tooltip"آپارات"
/* + Midori + */});
/************************
* Adding Aparat End*
************************/ 

امید که بکار بیاید.[تصویر:  cool.gif]

منبع: تالار میدوری