ایجاد: ۸:۱۲ ۱۳۹۱/۶/۱۳
ویرایش: ۲۰:۵۶ ۱۳۹۳/۱۰/۵

یادداشت‌ها

»

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

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

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: