تالار میدوری

نسخه کامل: اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
صفحه ها: 1 2
اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4

آگهی
متن پیام :
نگارش نهایی این آموزش را در اینجا ببینید.
برای استفاده در نگارش 1.8.7 به اینجا بروید .



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

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











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




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

کد HTML:
$.sceditor.command.set('video',


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

کد HTML:
/* + 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 را با کدهای زیر جایگزین کنید:

کد HTML:
/* + 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 را باز کنید و کدهای زیر را پیدا کنید :

کد HTML:
/* Additional buttons (for MyBB) */
.sceditor-button-video div  {
  background-image: url(video.png);
}


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

کد HTML:
/* + Midori + */ .sceditor-button-midori div  {
/* + Midori + */ background-image: url(midori.png);
/* + Midori + */ }


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

کد HTML:
{$code}quote|

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

کد HTML:
{$code}quote|midori|


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

کد HTML:
{$code}quote,midori|





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

کد HTML:
jscripts/sceditor/editor_themes

آپلود کنید . (برای نمونه تصویری پیوست کرده ام) ==> [attachment=2481]
کار تمام است . امید که بکار بیاید .
اضافه کردن دکمه به ادیتور SCEditor مای بی بی 1.8.4 (نگارش نهایی)
با کمی تغییرات به نتیجه ی نهایی رسیدم که شد مطابق با تصویرهای پیوستی .

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

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

کد HTML:
/* + 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" 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 + */ });

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

[تصویر: 1470122098111.jpg]
صفحه ها: 1 2
لینک مرجع