یادداشت‌ها

»

ادیتورهای محتوای غنی شده برای صفحات وب

ورودی textarea در یک فرم تحت وب، فقط قابلیت درج متن ساده را دارد (مثل Notepad)
اما برای درج مطالب در سایت، ما نیاز به ادیتوری داریم که امکانات یک متن غنی‌شده (مثل نرم‌افزار word) را دارا باشد یعنی بتوانیم رنگ و سایز و نوع فلم را تغییر دهیم، تصویر و جدول و خط درج کنیم، بخشی از متن را لینک کنیم و ...
با کمک جاوا اسکریپت (و گاهی کتابخانه‌های آن مثل جی‌کوئری) این نیاز محقق شده و هم اکنون ادیتورهای زیادی هستند که این قابلیت را دارند و به مدیران امکان درج و ویرایش مطالب‌شان را به صورت آنلاین می‌دهند.
این ادیتورها که با اصطلاح What You See Is What You Get یا اختصارا WYSIWYG (بخوانید ویز ویگ) شناخته می‌شوند، دارای امکانات متعدد و در نتیجه حجم‌های متفاوتی هستند که در ادامه چند نمونه آن معرفی می‌شود:

• javascript wysiwyg editor
  یک ادیتور ساده جاوا اسکریپتی با حجم 3 کیلوبایت!
• NicEdit
  یک ادیتور خوب جاوا اسکریپتی با حجم 30 کیلوبایت
• CKEditor
  یک ادیتور پرقابلیت و البته سنگین‌حجم که قبلا با نام FCKEditor شناخته می‌شد.
• TinyMCE
  یک ادیتور کامل با حجم حداقل 200 کیلوبایت که بنظرم جزو بهترین‌هاست. این ادیتور توسط بسیاری از CMS های معروف از جمله WordPress مورد استفاده قرار گرفته است.
• Redactor
  یک ادیتور خوب نوشته شده با کمک جی‌کوئری
• fresherEditor
  یک ادیتور ساده نوشته شده با جی کوئری که به راحتی قابلیت تغییر و حذف و اضافه کردن قابلیت‌ها را دارد. مثال آنلاین
• Live Edit و jQuery Notebook
  دو ادیتور فوق ساده با قابلیت‌های Bold, Italic, Link, List که پس از انتخاب متن، کنار متن ظاهر می‌شود. (پیش‌نمایش Live Edit | پیش‌نمایش jQuery Notebook)
• Popline
  این ادیتور مشابه دو ادیتور فوق است اما کمی پیشرفته‌تر است. (پیش‌نمایش)
• Summernote
  این ادیتور عالی و رایگان و نسبتا سبک، دارای استایل بوت استرپ بوده و درج تصاویر به صورت base64 از ویژگی‌هایی است که آن را از سایر ادیتورهای مشابه متمایز میکند.
• Froala WYSIWYG Editor
  یک ادیتور ساده‌ی جی‌کوئری دیگر، که سبک بوده و هم به صورت inline و هم به صورت عادی قابل استفاده است. (پیش‌نمایش)
• SCEditor
  یک ادیتور سبک برای ویرایش html و bbcode با قابلیت‌های نسبتا خوب و پشتیبانی از RTL.
• bootstrap wysiwyg
  همانطور که از نامش پیداست، این ادیتور، بر اساس تم بوتسترپ تهیه شده و امکانات پایه و ساده را داراست.
• Quill
  یک ادیتور ساده اما نوین که در وسایل لمسی هم به خوبی کار می‌کند و به راحتی قابل گسترش است.
• Quink
  یک ادیتور خوب و قوی و پرامکانات که جای بهتر شدن دارد. یکی از محاسن این ادیتور نسبت به اکثر رقبایش، امکان درج آبجکت‌های ترسیمی است... (پیش نمایش)
• Gridmanager.js
  یک پلاگین اعجاب انگیز برای فراهم آوردن امکان مدیریت صفحه‌بندی (grid manager) به همراه پلاگین‌هایی برای کار با wysiwyg هایی امثال TinyMCE
  توضیح بیشتر آنکه؛ در زمان استفاده از یک ادیتور، فقط یک متن (مثلا متن خبر) را می‌توانید درج یا ویرایش کنید. اما با استفاده از Gridmanager.js شما می‌توانید امکان ویرایش اجزای یک صفحه را برای کاربر فراهم کنید. یعنی کاربر می‌تواند چینش اجزای یک صفحه را به همراه ستون‌بندی و ... آن طبق دلخواه خود تغییر دهد. به عبارت دیگر با کمک Gridmanager.js شما می‌توانید به کاربر، امکان ساخت یک صفحه کاملا سفارشی را فراهم کنید.
• WYMeditor
  یک ادیتور خوب و ساده با ویژگی ممتاز css based بودن که براوزرهای قدیمی را نیز ساپورت می‌کند. (پیش نمایش)
• Squire
  شعار این ادیتور سبک و خوب، سبکی و سادگی است. با حجم حدود 12 کیلوبایت و کارکرد روان در همه براوزرها (حتی IE8) و بدون نیاز به هیچ کتابخانه js و تم و مودال پیشفرض که کار تطابق آن با تم و کدهای شما را بسیار ساده‌تر می‌کند.
  یک نکته جالب این ادیتور نسبت به سایر ادیتورها این است که از متد execCommand برای اعمال استایل و حتی undo/redo استفاده نکرده است! (سورس‌ش واقعا تماشایی‌ست)
• Dante Editor
  Dante را می‌توان یک ادیتور واقعا ابتکاری نامید. در عین سادگی و کوچکی، کارهای معمول را انجام می‌دهد. فقط برای درج تصویر/ویدئو، این ادیتور برخلاف ادیتورهای دیگر، پس از درج Enter توسط شما، یک علامت پلاس + در کنار خط جدید ایجاد می‌کند تا شما بتوانید لینک ویدئو (مثلا از یوتیوب) را درج کنید یا تصویری را از سیستم خود انتخاب کنید تا به صورت inline base64 درج شود.
  این ادیتور که بر مبنای ادیتور medium و ادیتورهایی مانند این تکامل یافته است، همچنین امکان auto save و آپلود و ... را نیز در صورت تنظیم صحیح داراست.

---

یادداشت‌های مرتبط

1. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
2. برنامه های تحت وب آفلاین، چرا و چگونه؟
3. نمودارها در صفحات وب
4. استفاده از فونت دلخواه در صفحات وب
5. نقشه Google در سایت شما
6. ابرکوکی و ذخیره ساز جدید HTML5
7. انیمیشن با CSS
8. همه چیز درباره داده ها و تصاویر Inline درون برنامه ای
9. روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب
10. پلاگین هایی برای کار با فرم های ورود اطلاعات
11. کار با قابلیت Page Visibility و کاربردهای آن
12. اعتبارسنجی و شکل دهی فرم ها با استفاده از html5
13. کشیدن و انداختن (رها کردن)
14. html نسخه 5
15. پخش کننده های فایل صوتی تصویری در صفحات وب
16. معرفی برخی برنامه های مدیریت محتوا متداول و عمومی
17. برنامه نویسی اندروید
18. ارتفاع اتوماتیک ورودی متن جهت حذف اسکرول
19. روش ها و تکنیک های پنهان کردن ایمیل
20. کار با تصاویر در سمت کاربر
21. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
22. بهینه سازی آنلاین سی اس اس و جاوا اسکریپت
23. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
24. نکات و ترفندهایی برای قالب دهی به نمای چاپ صفحات وب
25. نمونه کارهایی با اچ تی ام ال پنچ