۳۹ دیدگاه نظر فاطمه افشار
7 ادیتور متن WYSIWYG برای وب سایت
منظور از ویرایشگر‌های متن چیست؟ ویرایشگر‌های متن در واقع  ویرایشگر هایی هستند که امکانی را فراهم می‌کنند که بدون نوشتن حتی یک خط کد، مطلب مورد نظر خود را به راحتی در سایت درج کنیم. در این مقاله به معرفی 7 ادیتور متن WYSIWYG برای وب سایت می‌پردازیم، برای آشنایی بیشتر با این ادیتور‌ها با ما همراه باشید.

WYSYWYG چیست؟

WYSYWYG مخفف عبارت What You See Is What You Get است. ادیتور های  WYSYWYG همان‌طور که از نامشان پیدا است، این امکان را فراهم می‌کنند که همزمان با ویرایش متن، خروجی را نیز مشاهده کنیم. برای مثال می‌توانیم متن را bold یا italic کنیم. نرم افزار هایی مانند Microsoft Word و یا Word Pad از این  قبیل ادیتور‌ها هستند.

برای درج مطلب در سایت، ما نیازمند به یک ادیتور با چنین قابلیتی هستیم یعنی یک ادیتور که با آن بتوانیم تصویر  یا جدولی را درج کنیم، بخشی از متن ر ا لینک کنیم، سایز و نوع فونت را تعیین کنیم و ... .

این نیاز با ادیتور هایی که به کمک جاوا اسکریپت و در برخی موارد کتابخانه‌هایی مثل JQuery ساخته شده‌اند، برطرف شده است. در واقع اين اديتور‌ها همان  textarea‌ها هستند که با استفاده از جاوا اسکریپت قابلیت‌های زیادی به آن‌ها اضافه شده است. کاربرد این ادیتور‌ها در وبسایت‌ها و وبلاگ‌ها است برای مثال از این ادیتور‌ها جهت ساخت قسمت نوشتن نظر یا نوشتن مطالب سایت استفاده می‌شود. در این مقاله به معرفی تعدادی از این ادیتور‌ها می‌پردازیم.

1- CKEditor

این ادیتور، مورد استفاده‌ی کمپانی‌های بزرگی همچون، IBM و Adobe است. تنظیمات زیادی در زمینه شخصی سازی، کنترل محتوا و یکپارچگی دارد. CKEditor - ادیتور html

2- TinyMCE

این ادیتور نیز از جمله معروف‌ترین‌ها است که توسط کمپانی‌های بزرگی استفاده می‌شود و همچنین محیطی شبیه به نرم‌افزار WORD را برای شما ایجاد می‌کند. tiny - ادیتور html

3- Mercury Editor

محیط جذابی دارد. بهترین بخش آن، ایجاد یادداشت‌های کوچک در مکان مشخصی از صفحه‌ی وب است. Mercury - ادیتور html - ادیتور متن WYSIWYG برای وب سایت

4- Redactor

این ادیتور نیز مانند Mercury، محیط جالبی دارد. redactor - ادیتور html - ادیتور متن WYSIWYG برای وب سایت

5- Markitup

Markitup یک افزونه‌ی جاوا اسکریپت است که روی jQuery ساخته شده است. و همچنین زبان‌های نشانه‌گذاری مانند HTML ,Textile Wiki Syntax ,Markdown ,BBcode در آن به سادگی قابل اجرا می‌باشند. markiyup - ادیتور html - ادیتور متن WYSIWYG برای وب سایت

6- Xinha

از لحاظ ظاهری شاید خیلی جالب نباشد ولی امکاناتی که دارد، دقیقا همان چیزی است که شما می‌خواهید. Xinha - ادیتور html - ادیتور متن WYSIWYG برای وب سایت

7- NicEdit

NiceEdit یک ادیتور کم حجم است که سرعت بالایی دارد و کار کردن با آن ساده است. nicEdit - ادیتور html ادیتور متن WYSIWYG برای وب سایت جمع‌بندی:

وقتی در مورد ویرایش در HTML صحبت می‌کنیم، WYSIWYG editor‌ها نقش بسیاری زیادی را در صرفه جویی در وقت برای کسانی که دانش چندانی در زمینه CSS Styling ندارند، ایفا می‌کنند. این باعث می‌شود تا شاهکاری حرفه‌ای خلق کنید. اگر در مورد ادیتور متن WYSIWYG برای وب سایت ، سوال یا تجربه‌ای داشته‌اید خوشحال می‌شویم که با ما و کاربران سون لرن به اشتراک بگذارید.

اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره متخصص طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام ، دریافت پروژه و کسب درآمد هستی.
۳۹ دیدگاه
ما همه سوالات و دیدگاه‌ها رو می‌خونیم و پاسخ میدیم

سلام، به چه نحوی میشه ادیتوری درست کرد که داخلش به راحتی بشه بین متن مقاله‌ها تصویر هم قرار داد؟ از نسخه 5 ckeditor که استفاده میکنم عکس رو فقط در فرانت نشون میده، میشه راهنمایی کنید برای ایجاد مقاله همراه با متن و تصویر متعدد باید از چه ادیتوری استفاده کرد و اپلود تصاویر انجام بشه ، با لاراول

نازنین کریمی مقدم نازنین کریمی مقدم

درود حقیقتا چون خیلی در این زمینه کار نکردم جواب سوالتون رو نمیدونم اما کامنتتون رو تایید کردم تا اگر بقیه دوستان دیدند بتونند کمک کنند. برقرار باشید

میشه یک ادیتور هم معرفی کنید که امکان گرفتن خروجی word هم داشته باشه. دقیقا مثل CKEditor ولی این CKEditor امکان خروجی گرفتن با فرمت word رو توی فقط تو نسخه‌ی premium داره

نازنین کریمی مقدم نازنین کریمی مقدم

درود Zoho Writer رو هم بررسی کنید. امیدوارم ورژن رایگانش این امکان رو داشته باشه.

سلام وقت بخیر، پرسشم اینه که آیا استفاده از ادیتور متن اجباری است یا خیر؟ چرا که مثلا با تگ p میتونیم متن رو توی صفحه وب سایت بنویسیم و با css هم اگه بخواهیم به اون استایل بدهیم ...

نازنین کریمی مقدم نازنین کریمی مقدم

درود خیر اجباری نیست و اگر با همونا میتونید انجام بدید اوکیه.

سلام .من چگونه میتوانم در wysiwyg با mysql ارتباط برقرار کنم

نازنین کریمی مقدم نازنین کریمی مقدم

درود این آموزش رو مطالعه کنید.

سلام خانم کریمی مقدم گل وقت بخیر وقتی با ckeditor متن مینویسم به صورت زیر در دیتابیس ذخیره میشه و میخوام مثلا با کد css خارج از محیط ckeditor رنگ همه تگ‌های p رو تغییر بدم حالا اگر یکی از تگ‌های p در محیط ckeditor قرمز شده باشه دیگه با کد css تغییر نمیکنه البته رنگ رو مثال زدم منظورم همه صفات css هست <h2 style="margin-right:360px"><span style="color:#ff0000">بسم الله الرحمن الرحیم</span></h2> <p><span style="color:#f39c12">fffffffffffffffffff</span></p>

نازنین کریمی مقدم نازنین کریمی مقدم

درود این متنی که فرستادید اگر مشکل از ادیتور ما نباشه و داده واقعی تون باشه، داره علامتهای بزرگتر و کوچکتر رو به > و < تبدیل میکنه. شما دو راه دارید: یا با css استایل رو تغییر بدید که در این صورت باید داده رو دقیقا به فرمت html دربیارید و بعد استایل رو بهش اعمال کنید، یا کلا بیخیال css بشید و با استفاده از توابع رشته ها، عبارات موردنظرتون رو پیدا و جاگذاری کنید. راه کار اول اصولی و راحتتر هست و توصیه میکنم رو اون تمرکز داشته باشید. برای اولویت استایل و استایلهای inline توضیحات خود سایت بهتون کمک میکنه.

سلام خداقوت من ckeditor رو با آپلود عکس تو php ایجاد کردم و اطلاعات تو دیتابیس در قالب تگ ذخیره میشه و صفات این تگ‌ها inline هست یعنی اولویت داره به انواع دیگه css حالا من میخوام مثلا یک صفتی رو با کدی که خودم مینویسم تغییر بدم چطوری اینکار رو انجام بدم خیلی برام مهمه لطفا ایمیل کنید برام

نازنین کریمی مقدم نازنین کریمی مقدم

درود یک نمونه رکوردی که در دیتابیس دارید رو بفرستید تا بتونم کمک تون کنم.

محمد محمد

باسلام من ذخیره میکنم با div و p ذخیره میشه چجوری نمایش بدم داخل صفحه وقتی نمایش میدم با p و div نمایش داده میشه؟؟چکار کنم؟

نازنین کریمی مقدم نازنین کریمی مقدم

درود با کدوم ادیتور کار میکنید؟

علی هژبری علی هژبری

سلام. بنده موفق شدم نسخه ی 3.2.5.2 ادیتور Froala رو کرک کنم. دیگه نه خطای لایسنس بده نه چیزی به متن اضافه کنه. اگه خواستید میتونم باهاتون در اشتراک بزارم.

اقبال اقبال

سلام و عرض ادب، ببخشید ما یه فروم آموزشی داریم . و برای آن به دنبال یک ادیتور هستم که هم بتوانیم توش عبارت‌های ریاضی بنویسیم . و هم بشه توش کد قرار داد . من این دو تا رو ندیدم که جایی داشته باشه جفتش رو شما چیزی میشناسید؟

نازنین کریمی مقدم نازنین کریمی مقدم

سلام. من quill رو توصیه میکنم که تا حدی این دو مورد رو کنار هم فراهم کرده. در صفحه‌ی اصلیش هم یک دمو درست کرده که میتونید تست کنید و اگر برای اهدافتون کافی بود، ازش استفاده کنید. لینک ادیتور quill

دانیال یوسفی فر دانیال یوسفی فر

جای ادیتور Quill.js خالیست :)

فاطمه افشار فاطمه افشار

ممنونم از شما بابت معرفی این ادیتور به زودی به مقاله اضافه می‌کنیم

ahadabasi ahadabasi

یا اینکه مثل همین ارسال نظر 7learn که امکان نوشتن کدهای html, css, php و .. داره

ahadabasi ahadabasi

چطوری میتونم به ckeditor دکمه اضافه کنم مثلا دکمه آپلود فایل یا دکمه پرداخت ؟؟

لقمان آوند لقمان آوند

اینکار با جاوااسکریپت انجام میشه . دکمه ای در کنار ادیتور بزارید که با کلیک روی اون تیکه کد خاصی با textarea اضافه بشه . سادست ..

ahadabasi ahadabasi

ممنون از پاسخگویی سریع شما :grin: ولی من میخوام که دکمه به ckeditor اضافه بشه مثل همون دکمه‌های تراز بندی متن و سایر امکاناتی که از قبل داشته آیا امکانش هست ؟؟

لقمان آوند لقمان آوند

آره میشه . این جور ادیتور‌ها API خاص خودشون رو دارند و باید برای افزودن دکمه‌ها پلاگین بنویسی براشون . سرچ کنی پیدا می‌کنی . اینجا رو هم ببین .

mohamadi.manijeh mohamadi.manijeh

من خودم نظرم روی تلریک میخاستم ببینم نظر بقیه چی هست ..؟

کیوان علی محمدی کیوان علی محمدی

تلریک کامپوننت هاش واقعا خوب و با کیفیته اما شما باید یه مقایسه ای هم بکنید از لحاظ حجم اسکریپتی که به سایت اضافه میشه،مخصوصا اگه بخواید برای کاربان عمومی هم در دسترس باشه.

mohamadi.manijeh mohamadi.manijeh

سلام میخاستم ببینم بین ادیتورهایی که وجود دارد نه الزاما رایگان کدوم از همه قویتر و بهتر هست ... برای یک سایت مدیریت محتوا میخاستم .... و علت برتری را هم بفرمایید چی هست ؟؟

کیوان علی محمدی کیوان علی محمدی

سلام خوب معمولا ادیتور‌های که پولی هستن بهترن؛اما ادیتور‌های رایگان مثل TinyMCE ادیتور‌های خوبی هستن و توی خیلی جاها استفاده میشن،سایت‌های بزرگ هم معمولا به خاطر امنیت خودشون اقدام به طراحی ادیتور میکنن.

جابر جابر

سلام من ckeditorرا دارم فقط نمیدونم چطوری از کداش در دریم ویور برای طراحی سی ام اس استفاده کنم .باید کدهاش را کپی کنم یا ک از پلاگیناش استفاده کنم.این سوالیه ک چند ساله ذهنم درگیرشه ک چگونه سیستم‌های سی ام اس ازش استفاده میکنن.اولا ی پاسخ روشن بهم بدین /ثانیا پیشنهاد میکنم ی مطلب در این مورد بذارین مطمئنا در اینترنت تک خواهد بود چون من ک پیدا نکردم مخصوصا برای دریم ویور ک قدرتمند و طرفدارای زیادی داره ممنون میشم

لقمان آوند لقمان آوند

ببینید این ادیتور‌ها در واقع همون textarea‌ها هستند که با استفاده از جاوااسکریپت قابلیت‌های زیادی به اونها اضافه شده . در خود سایت ckeditor نحوه ی استفادش توضیح داده شده : http://docs.cksource.com/CKFinder_2.x/Users_Guide مثلا این مثال رو ببینید . بعد از لود کردن فایل‌های ckeditor فقط مقدار ویژگی یه textarea رو کافیه بزارید ckeditor تا در صفحه وب تبدیل به یک ادیتور پیشرفته شه : http://nightly.ckeditor.com/13-06-23-13-05/standard/samples/replacebyclass.html

seraji1 seraji1

ممنون از راهنماییاتون.خیلی ب دردم خورد.چیزی ک من تا حالا فهمیدم اینه ک از سی ام اس‌ها باید بر طبق اصول اونها و...سایتت را درست کنی واستفاده کنی.اما حالا این وسط من اگه بخوام سایت داینامیک خودم را بسازم ک احتیاجی ب اینها نداشته باشم چکار باید بکنم یا این ک ایا مثلا وردپرس یا جوملا یا دروپال میتونن این سایتی را ک من درست کردم را پشتیبانی کنن

سجاد دریس سجاد دریس

سلام. در این صورت خودتون باید یک CMS طراحی کنید. که با وجود وردپرس و جوملا و دیگر cmsها که کامل و بسیار حرفه ای هستند، کار درستی بنظر نمیرسه. خیر پشتیبانی نخواهند کرد.

کاظم کاظم

سلام ممنون چجوری میتونیم اینارو با دیگر سیستم‌ها ست کنیم؟

سجاد دریس سجاد دریس

سلام. باید با php آشنایی داشته باشین

ادیتورها علاوه بر textarea که یه ذره پیاده سازی با اون سخت‌تر هست میشه با یک تگ div که اتربیوت contenteditable اون برابر true هست یک چیزی شبیه به textarea ایجاد کرد اما امکان embedd شدن کدهای html در اون وجود داره و همونجا هم به صورت html رندر میشه درحالی که textarea اینطور نیست بدنیست به این لینک نگاهی بندازید: https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea

safiran safiran

من که همون "اکسپرشن وب" و "دریم ویور" رو به همه ی اینا ترجیح میدم...آخه به اینا هم میگن ادیتور؟؟؟

سجاد دریس سجاد دریس

سلام. این ادیتور ها، ادیتورهای تحت وب هستن، و نه تحت ویندوز!! از این ادیتورها در وبسایت‌ها و وبلاگ‌ها استفاده میشه به طور مثال برای قسمت نوشتن نظر یا، نوشتن مطالب سایت. نمونشو هم میتونید در انجمن 7learn هنگام ایجاد تاپیک جدید، یا پاسخ جدید مشاهده کنید

safiran safiran

آخ... من فکر کردم اینا واسه کدنویسیه...ببخشید :wink:

سجاد دریس سجاد دریس

;)

اشتراک گذاری مقاله در :