مرجع پارسی MyBB
اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - نسخه‌ی قابل چاپ

+- مرجع پارسی MyBB (https://community.mybbiran.com)
+-- انجمن: متفرقه (https://community.mybbiran.com/forum-52.html)
+--- انجمن: آموزش های متفرقه (https://community.mybbiran.com/forum-33.html)
+--- موضوع: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 (/thread-17800.html)



اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۴/۱/۷

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

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

تصویر نمونه :


   

فیلم های نمونه :

.zip   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 (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 
آپلود کنید . (برای نمونه تصویری پیوست کرده ام) ==> 
.png   midori.png (اندازه: 808 bytes / تعداد دفعات دریافت: 141)
کار تمام است . امید که بکار بیاید .

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


RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۴/۱/۹

اضافه کردن دکمه به ادیتور 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]


RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - reyhane - ۱۳۹۴/۲/۱۷

سلام.
ممنون از آموزش خوبتون.
چجوری میشه به پاسخ سریع هم دکمه اضافه کرد؟


RE: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 - میدوری - ۱۳۹۴/۲/۱۷

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


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

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


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 (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]

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