جمعه ۱۰ فروردین ۱۴۰۳ |  عضویت / ورود

معرفی سه ادیتور آنلاین (ویژه برنامه​نویسان به زبان​های تحت وب)


اگر با کنترل​پنل مربوط به وبلاگ​ها (وبلاگ​هايي مثل «پرشين​بلاگ»، «بلاگ​فا»، «بلاگر» و ...) کار کرده و يک پست ارسال کرده باشيد، با اديتوري که در همه آن​ها موجود است، آشنا هستيد.

در نظر بگيريد که قصد داريد براي يک سايت صفحه​اي طراحي کنيد که از طريق فرم آن صفحه، يک خبر به ديتابيس افزوده شود. در چنين شرايطي براي اينکه کاربر بتواند متن خبرش را تزيين کند و يا از امکانات نرم​افزارهايي مثل Frontepage يا Expression Web بر روي وب نيز استفاده کند، بايد اديتوري آنلاين براي فيلد مربوط به خبر در نظر بگيريد:

اما جالب است بدانيد که اين روزها به يمن ظهور Ajax و بارز شدن قدرت جاوا و جاوا اسکريپت، بيشتر از تعداد اديتورهاي آفلاين، اديتورهاي آنلاين نوشته شده است!
اديتورهايي که تماماً رايگان و Open Source هستند و چيزي از اديتورهايي مثل Frontepage و ... کم ندارند!

من اين چند روز براي پروژه دانشگاه، دنبال چنين اديتورهايي بودم که در کمال تعجب بيش از 20 نوع اديتور آماده ديدم!
از اين بين، تعدادي از آن​ها از تکنولوژي​هاي قديمي استفاده مي​کردند و بعضي ديگر باگ​هاي وحشتناکي داشتند! اما سه مورد از آن​ها برايم جالب بود که سعي مي​کنم معرفي اجمالي از آن​ها در اين پست داشته باشم.

قبل از آن يک توضيح براي برنامه​نويسان بدهم: ببينيد، روند کار به اين صورت است که شما با قرار دادن يک کد ساده با تگ script در بين head و کدي هم براي فراخواني توابع، در خصوصيات يک فيلد از نوع tesxtarea اين اديتور را از يک پوشه فراخواني مي​کنيد. کاربر اقدام به طراحي متن مورد نظرش مي​کند و پس از کليک بر روي Submit، کد HTML مربوط به اين فيلد در ديتابيس ذخيره مي​شود. هر کجا هم که لازم شد، اين کد از ديتابيس خوانده مي​شود و در صفحه نمايش داده مي​شود.

1- TinyMCE: اديتور تايني​.ام.سي.اي اديتور بسيار جالبي​ست! تمامي نوارابزارهاي عمومي و مهم نرم​افزار Frontepage يا WORD را داراست. تصويري که در بالا مي​بينيد مربوط به همين اديتور است. جذابيت اين اديتور در اين است که با فشردن دکمه Fullscreen Mode اديتور به سرعت به حالت تمام​صفحه در مي​آيد و به راحتي مي​توان در آن متون را تزيين کرد و يا عکس، ويدئو، فايل و هر چيز ديگري Insert کرد.

مي​توانيد يک دمو از تمامي امکانات (Features) اين اديتور را اينجا ببينيد. و اگر خواستيد، از اينجا دانلود کنيد. (بر روي Main Pakage کليک کنيد)

Get it now!

2- FCKeditor: اين اديتور هم شبيه به اديتور TinyMCE است با اين تفاوت که امکانات کمتري در آن تعبيه شده است. نمونه گرافيکي آن را با شکل و شمايل Office2003 اينجا ببينيد و براي دانلود به اين صفحه مراجعه کنيد.
تنها عيبي که مي​توانم براي اين اديتور بگويم، اين است که بيش از اندازه از تکنولوژي Ajax استفاده کرده است! و طبيعي​ست که کمي کار کردن با آن به حوصله بيشتري نياز دارد!

 

HotEditor3- HotEditor: هات.اديتور خبر خوشي براي کساني به حساب مي​آيد که از انجمن​هاي اينترنتي بر روي سايتشان استفاده مي​کنند! انجمن​هايي مثل MyBB يا PHPBB2 و ...
اين اديتور به عنوان يک ماژول و جايگزيني براي آن انجمن​ها به حساب مي​آيد.
مفيد بودن اين اديتور شايد بيشتر به اين دليل باشد که مي​تواند هم دو کد HTML و BBCode را توليد کند! اما هدف اصلي آن کار با و توليد کدهاي BB است.

اين اديتور را در اين صفحه به طور کامل ببينيد و تست کنيد و نسبت به سيستم مديريت انجمن​هايي که در اختيار داريد،​ اديتور مربوطه را از اينجا دانلود کنيد.
تنها نکته​اي که مي​توانم در مورد اين اديتور بگويم، اين است که شايد محيط و نحوه​ي کار اين اديتور نسبت به دو اديتور اول، براي کاربران آماتور چندان آشنا نباشد!
ضمن اينکه بسياري از تنظيمات جزئي که در دو اديتور اول وجود دارد به خاطر ماهيت کدهاي BB در اين اديتور وجود ندارد.

ضمناً هر سه Editor به نوعي رايگان و OpenSource هستند و اين ويژگي را دارند که با مرورگرهايي مثل: IE, FireFox, NetScape, Opera 9x and Safari 1.3.2 or higher به درستي کار کنند.

نتيجه نهايي:
من الان دارم اديتور TinyMCE را به خاطر پيشرفته​تر و باکيفيت​تر بودنش دانلود مي​کنم، شما خودتان خسرو هستيد و صلاح کار خويش دانيد!
اميدوارم سايت​هاي ايراني با استفاده از اين نوع اديتورها کمي رنگ و لعاب بگيرد! مرديم از بس سايت​هايي پرخطا و معيوب و بي​روح ديديم!

در ادامه متن، در مورد نحوه​ي استفاده از TinyMCE يک مطلب روشن​ساز قرار داده​ام.

موفق باشيد؛ حميد رضا نيرومند

برچسب​ها: Online Editor - Text Editor for Internet - Forum Editor - Online Text Editor for web designing


اولين كاري كه مي​كنيد اين است که به آدرس زير رفته، اديتور TinyMCE را دريافت مي​کنيد:
محتويات پوشه tinymce را در مسيري مثل اين: includes/jscripts/tiny_mce منتقل کنيد.
2- صفحه​اي كه فرم يا همان Textarea در آن قرار دارد را با ويرايشگر باز ​کنيد، بالاي صفحه يا كنار فرم textarea كد زير را Paste کنيد:

نقل قول:
<script language="javascript" type="text/javascript" src="includes/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespel l,insertdatetime,preview,zoom,media,searchreplace, print,contextmenu,paste,directionality,fullscreen" ,
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,sepa rator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,sear ch,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,sepa rator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
content_css : "example_word.css",
plugi2n_insertdate_dateFormat : "%Y-%m-%d",
plugi2n_insertdate_timeFormat : "%H:%M:%S",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
media_external_list_url : "example_media_list.js",
file_browser_callback : "fileBrowserCallBack",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});

function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
alert("Filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);

// Insert new URL, this would normaly be done in a popup
win.document.forms[0].elements[field_name].value = "someurl.htm";
}
</script>
3- توجه داشته باشيد كه در خط اول كه قسمت درشت شده در کد زير:
نقل قول:
<script language="javascript" type="text/javascript" src="includes/jscripts/tiny_mce/tiny_mce.js"></script>

در آن نوشته شده است، اگر تغيير کرده بود، يعني مثلا شما محتويات اديتور را در پوشه​اي به نام editor ريخته بوديد، بايد به مسيري که تغيير پيدا کرده تغيير کند.


[ارسال شده در مورخه : سه شنبه، 7 اسفند، 1386 توسط Hamid]
[ #برنامه‌ نويسي]



بازدیدها از این مطلب: 14944 بار   امتیاز متوسط :   تعداد آراء: 2   امتیاز دهید:

نظرات طرح شده

نام: [ کاربر جدید ]
ایمیل:

نظر:


اجازه استفاده از تگهای HTML را ندارید


جمع عدد 5 با 12 را در كادر زیر وارد نمایید:
(این كار برای جلوگیری از فعالیت موتورهای اسپمر است)


* توجه: نظر شما بعد از بررسی، نمایش داده خواهد شد.

حمید (امتیاز : 0)(لینک نظر)
توسط حمید در مورخه : پنجشنبه، 12 اردیبهشت، 1387
دوست عزیز دانلود کردم ولی طبق آموزشتون نتونستم بسازمش

!


[ ارسال جوابیه ]


[بدون موضوع]                توسط در مورخه : جمعه، 13 اردیبهشت، 1387(لینک نظر)
من این ادیتور tinymce رو نصب کردم ولی نمیدونم چه جوری به بانک اطلاعاتی وصل کنم یعنی اطلاعات رو به بانک بفرستم
و هیچ دکمه برای ارسال نیست
اگه کمک کنید ممنونم


[ ارسال جوابیه ]


[بدون موضوع] (امتیاز : 1)(لینک نظر)
توسط Hamid در مورخه : جمعه، 13 اردیبهشت، 1387
دوستان عزيز؛ فقط مثال​هاش رو نگاه کنيد و به سورس.کدهاش دقت کنيد. بعد از اينکه کد بالا رو در قسمتي از صفحه قرار داديد، تمامي textareaهايي که در صفحه داريد، اديتوردار مي​شن. و حالا طوري تنظيم کنيد که متويات اين textarea به صفحه بعد ارسال بشه و در ديتابيس ثبت بشه، همين!


[ ارسال جوابیه ]


[بدون موضوع]                توسط در مورخه : چهارشنبه، 16 بهمن، 1387(لینک نظر)
ُسلام

خیلی سایت آموزنده ای دارین اما من یه سوال داشتم شاید خنده دار باشه اما خوب من اول کارم:D



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


[ ارسال جوابیه ]


hadi (امتیاز : 0)(لینک نظر)
توسط hadi در مورخه : جمعه، 16 اسفند، 1387
آقا خيلي عالي بود، دستت درد نكنه. بازم از اين آموزش ها بزارين لطفاً.


[ ارسال جوابیه ]


hadi (امتیاز : 0)(لینک نظر)
توسط hadi در مورخه : جمعه، 16 اسفند، 1387
سلام

1- براي فارسي كردن اديتور چي كار كنيم؟(من فايل XML فارسي رو از سايت دانلد كردم و درون پوشه مربوطه ريختم ولي جواب نداد!)



2- چه طور مي تونم خروج ياين اديتور كه به جاي تكست اريا نشسته رو به ديتا بيس بفرستم . چون متن ارسال مي شه ولي عكس و فيلم و ... رو چه طور بايد ارسال كنم و فرا خواني اونه به چه ترتيبي هست؟


[ ارسال جوابیه ]


قاسم                توسط قاسم در مورخه : سه شنبه، 29 اردیبهشت، 1388(لینک نظر)
سلام

دمت گرم...

خیلی مطلب به درد بخوری بود...

خدا خیرت بده :D


[ ارسال جوابیه ]


afshin (امتیاز : 0)(لینک نظر)
توسط afshin در مورخه : شنبه، 31 تیر، 1391
سلام خسته نباشید مرسی از آموزشی که گذاشتید.

قسمت های insertfile,insertimage در دمو هست ولی وقتی دانلود کردم تو فایل دانلودی موجود نیست من بیشتر بخاطر این امکانات می خواستم از این ادیتور استفاده کنم که نبود.

شما میدونید چطور باید فعال کرد ؟؟؟؟؟؟


[ ارسال جوابیه ]


سعید (امتیاز : 0)(لینک نظر)
توسط سعید در مورخه : دوشنبه، 24 خرداد، 1395
سلام

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

با تشکر


[ ارسال جوابیه ]