tamafi6
دوشنبه 03 آذر 1393, 17:09 عصر
http://barnamenevis.org/attachment.php?attachmentid=126005&d=1416823691
باسلام
ادیتوری که درلینک زیرمشاهده میکنید یک ادیتورشخصی هست حدودیک ماهی وقت جهت اسکریپت نویسی اون گذاشته شده به زبان جاوااسکریپت هست معمولاادیتورها به صورت iframe بارگذاری میشوندو بخشی هم برای نمایش کدهای html وجودداره
البته ادیتورهای فراوانی وجوددارند که دوتاایرادمهم میشود ازاین ادیتورهاگرفت
1: حجم بالای اسکریپت های ادیتور
2: افزودن کدهای اضافه وپرحجم شدن مطلب توسط ادیتور
مثال وبسایت شخصی بنده دارای حدود 100 کیلوبایت کدنویسی php و 100 کیلوبایت کدنویسی html و css هست که کل cms میشود حدود 200 کیلوبایت ولی مشاهده میکنید که ادیتورهای آماده حجمی حدود یک مگابایت باراضافه به سرور اضافه میکنه
به همین دلیل برای بخش ادیتورارسال مطلب یک پلاگین شخصی نوشته شد که درحین کم حجم بودن وسادگی میتوان کاملا روان وساده به سلیقه کاربرتغییرداده بشه
این پلاگین غیراز Iframe هست یعنی کدهای مورد نظربه صفحه افزوده میشه مانند ادیتور خود انجمن برنامه نویس که مشاهده میکنید برای هرعنصریک تابع دراختیارشماقرارمیدهد
برای دیدن مطلب موردنظر بعدازافزودن عنصربخشی به عنوان preview یاپیش نمایش افزوده شده که مطلب نوشته شده رامیتوان مشاهده نمود
برای افزودن لینک وتصاویردوبخش دیگرتعبیه شده که باکلیک نمودن برروی لینک ها میتوان عناصررابه صفحه افزود
تپ هاتوسط تابع onclick فراخوانی شده وبخش اسکریپت اصلی رشته هارا به صفحه می افزاید
<span class="tooltip-bottom" title="تصویر"><button class="small" onclick="tag('img'); return false;"><i class="icon-picture"></i></button></span>
برای هرتابع میتوان رشته موردنظررابه سلیقه خود نوشت
case 'img':
url = prompt("آدرس تصویرراواردنمایید", '');
alt = prompt("برچسب تصویر", '');
image3 = prompt("کلاس تصویرراواردنمایید ( caption , full-width , align-left , align-right )", '');
image4 = prompt("طول تصویر", '');
image6 = prompt("متن برای تصویر", '');
start = url != null ? '<img src="'+url+'" alt="'+alt+'" class="'+image3+'" width="'+image4+'" title="'+image6+'" \/>' : '';
end = '';
break;
بعدازفراخونی تگ ها به بخش تکست باکس افزوده میشود ودرپیش نمایش میتوان رفتارآن رامشاهده نمود
برای کارهای سلیقه ای میتوان توابع راتغییرداد مثال درنمونه بالا میتوان یک کلاس خاص برای نمایش تصویربه تگ اضافه نمود-
کلاسه ها واستایل دهی توسط فریم ورک http://www.99lime.com/elements/ پشتیبانی شده یعنی ادیتوربرای این فریم ورک سازگارشده که میتوان به سلیقه آنراتغییرداد فقط کافیه با واردنمودن کلاس موردنظرهمان سبک راپیاده نمود البته عناصرراست چین شده هستند
بخش وارد نمودن عنوان به دوسبک کارمیکنه افزودن کلمات فارسی به عنوان لینک وممنوع نمودن افزودن کلمات فارسی واستفاده ازکارکترهای انگلیسی توسط شرط
// str = str.replace(/[^a-z 0-9]+/g,'');
// str = str.replace(/\s+/g, "-");
تصاویرهم به صورت onmuseover قابل مشاهده میباشندکه درنمونه غیرفعال هستند وبا تغییراستایل
/*
#thumb a.p1:hover .large {display:block; position:fixed; top:30%; left:35%; width:300px; height:180px; border:4px solid red;}
#thumb a.p1:hover {text-decoration:none; color:#000;}
*/
میتوان آنرامشاهده نموددرفایل admin.css
اشکالات
درنمونه بخش آپلود تصاویر افزوده نشده چون به زبان php هست ودوستان میتوانند آنرا اضافه نمایند
برای افزودن رنگ به متن ویاغیره نیز بخشی طراحی نشده
دموی ادیتور (http://pacifist.xzn.ir/myfiles/editor/)
دوستان اگرپیشنهادوتمایل به توسعه دارند بعداز تغییرات قراربدهندتابقیه نیزاستفاده نمایند.
دانلوددرضمیمه
باسلام
ادیتوری که درلینک زیرمشاهده میکنید یک ادیتورشخصی هست حدودیک ماهی وقت جهت اسکریپت نویسی اون گذاشته شده به زبان جاوااسکریپت هست معمولاادیتورها به صورت iframe بارگذاری میشوندو بخشی هم برای نمایش کدهای html وجودداره
البته ادیتورهای فراوانی وجوددارند که دوتاایرادمهم میشود ازاین ادیتورهاگرفت
1: حجم بالای اسکریپت های ادیتور
2: افزودن کدهای اضافه وپرحجم شدن مطلب توسط ادیتور
مثال وبسایت شخصی بنده دارای حدود 100 کیلوبایت کدنویسی php و 100 کیلوبایت کدنویسی html و css هست که کل cms میشود حدود 200 کیلوبایت ولی مشاهده میکنید که ادیتورهای آماده حجمی حدود یک مگابایت باراضافه به سرور اضافه میکنه
به همین دلیل برای بخش ادیتورارسال مطلب یک پلاگین شخصی نوشته شد که درحین کم حجم بودن وسادگی میتوان کاملا روان وساده به سلیقه کاربرتغییرداده بشه
این پلاگین غیراز Iframe هست یعنی کدهای مورد نظربه صفحه افزوده میشه مانند ادیتور خود انجمن برنامه نویس که مشاهده میکنید برای هرعنصریک تابع دراختیارشماقرارمیدهد
برای دیدن مطلب موردنظر بعدازافزودن عنصربخشی به عنوان preview یاپیش نمایش افزوده شده که مطلب نوشته شده رامیتوان مشاهده نمود
برای افزودن لینک وتصاویردوبخش دیگرتعبیه شده که باکلیک نمودن برروی لینک ها میتوان عناصررابه صفحه افزود
تپ هاتوسط تابع onclick فراخوانی شده وبخش اسکریپت اصلی رشته هارا به صفحه می افزاید
<span class="tooltip-bottom" title="تصویر"><button class="small" onclick="tag('img'); return false;"><i class="icon-picture"></i></button></span>
برای هرتابع میتوان رشته موردنظررابه سلیقه خود نوشت
case 'img':
url = prompt("آدرس تصویرراواردنمایید", '');
alt = prompt("برچسب تصویر", '');
image3 = prompt("کلاس تصویرراواردنمایید ( caption , full-width , align-left , align-right )", '');
image4 = prompt("طول تصویر", '');
image6 = prompt("متن برای تصویر", '');
start = url != null ? '<img src="'+url+'" alt="'+alt+'" class="'+image3+'" width="'+image4+'" title="'+image6+'" \/>' : '';
end = '';
break;
بعدازفراخونی تگ ها به بخش تکست باکس افزوده میشود ودرپیش نمایش میتوان رفتارآن رامشاهده نمود
برای کارهای سلیقه ای میتوان توابع راتغییرداد مثال درنمونه بالا میتوان یک کلاس خاص برای نمایش تصویربه تگ اضافه نمود-
کلاسه ها واستایل دهی توسط فریم ورک http://www.99lime.com/elements/ پشتیبانی شده یعنی ادیتوربرای این فریم ورک سازگارشده که میتوان به سلیقه آنراتغییرداد فقط کافیه با واردنمودن کلاس موردنظرهمان سبک راپیاده نمود البته عناصرراست چین شده هستند
بخش وارد نمودن عنوان به دوسبک کارمیکنه افزودن کلمات فارسی به عنوان لینک وممنوع نمودن افزودن کلمات فارسی واستفاده ازکارکترهای انگلیسی توسط شرط
// str = str.replace(/[^a-z 0-9]+/g,'');
// str = str.replace(/\s+/g, "-");
تصاویرهم به صورت onmuseover قابل مشاهده میباشندکه درنمونه غیرفعال هستند وبا تغییراستایل
/*
#thumb a.p1:hover .large {display:block; position:fixed; top:30%; left:35%; width:300px; height:180px; border:4px solid red;}
#thumb a.p1:hover {text-decoration:none; color:#000;}
*/
میتوان آنرامشاهده نموددرفایل admin.css
اشکالات
درنمونه بخش آپلود تصاویر افزوده نشده چون به زبان php هست ودوستان میتوانند آنرا اضافه نمایند
برای افزودن رنگ به متن ویاغیره نیز بخشی طراحی نشده
دموی ادیتور (http://pacifist.xzn.ir/myfiles/editor/)
دوستان اگرپیشنهادوتمایل به توسعه دارند بعداز تغییرات قراربدهندتابقیه نیزاستفاده نمایند.
دانلوددرضمیمه