ویرایشگرهای متنی WYSIWYG

شنبه, ۱۸ دی ۱۳۸۹، ۰۲:۴۲ ب.ظ

اگه یه برنامه نویس وب هستید لزوما باید با ادیتورهای متنی و اچ تی ام ال آشنایی داشته باشین،دیگه کسی حال و حوصله استفاده از تگ های اچ تی ام ال توی نوشته هاشو نداره و اینو باید به صورت WYSIWYG انجام داد یعنی اون چیزی که می بینیم اون چیزی هست که میخواییم،در زیر 10 تا از ادیتورهای معمول رو معرفی کردیم تا تو پروژه هاتون از اونا استفاده کنید.

1- NicEdit

پیشنمایش | دانلود
این ادیتور برای پروژه های بزرگ پیشنهاد میشود،یکی از پیچیده ترین و کاملترین ادیتورهاست که دارای حجم دانلود کمی می باشد.دارای ویژگی ها و تنظیمات بسیار آسان برای سایت و پروژه شما

2-TinyMCE

پیشنمایش | دانلود
تینی ام سی ای یکی از ادیتورهای اوپن سورس مبتنی بر جاوااسکریپت و اچ تی ام ال که میتواند به صورت بسیار کاستوم به کار برد،این ادیتور را میتوان یکی از کاملترین ویرایشگرهای متنی نام برد،یه چیزی مثل ام اس ورد مایکروسافت :D

3- CKEditor

پیشنمایش | دانلود
CKeditor نسخه جدید FCKEditor که یکی از کاملترین ادیتورها محسوب میشه،دارای فایل کانفیگ برای کاستوم کردن
اینم مثل تینی یه اوپن آفیس و ام اس ورد

4-YUI Rich Text Editor

پیشنمایش | دانلود
YUI Rich Text Editor یه ویرایشگری هست که توسط یوزر اینترفیس یاهو کنترل میشه و تکست اریا شما رو به یک ویؤایگشر متنی خوب تبدیل میکند.

5-MarkItUp!

پیشنمایش | دانلود
Markitup یک پلاگین جی کوئری هست که به شما اجازه میده تا تسکت اریاتون رو به یک ویرایشگر مورد نیاز تبدیل کنید Html وWiki syntax و BBcode رو ساپورت میکنه،اینا تنها کمی از پشتبانی های این ویرایشگر بود Markitup یک ویرایشگر WYSIWYG نیست.

6-FreeTextBox

پیشنمایش | دانلود
FreeTextBox یک ویرایگشر اچ تی ام ال مخصوص ASP.net که ظاهری کاملا شبیه ورد مایکروسافت داره

7- MooEditable

پیشنمایش | دانلود

8- OpenWysiwyg

پیشنمایش | دانلود
OpenWysiwyg یک ویرایگشر کراس بروزر هست که دارای امکاناتی از قبیل دراگ دان در یوزر اینترفیسش بوده و به شما این امکان رو میده که به بهترین شکل محتویات متنتون رو وِرایش کنه با این حال کروم ساپورتش نمیکنه ک:D

9- Spaw Editor

پیشنمایش | دانلود
Spaw یک ادیتور مبتنی بر وب هست که توسعه دهندگان وب را قادر میساز تا یک تکست اریا را به یک ادیتور کاملا پیشرفته ،کاملا سفارشی و چند زبانه و همچنین اسکین ایبل تبدیل کند.

10- jHtmlArea

پیشنمایش | دانلود
jHtmlArea یکی دیگر از ادیتورهای متنی هست که از کتابخانه جی کوئری براس ساختش استفاده شده.برای کارهای ساده پیشنهاد میشه از این ادیتور استفاده بشه.

۰ ۸۹/۱۰/۱۸

مرتضی فتحی

ادیتور های wysiwyg

۲۱ دی ۸۹ ، ۲۳:۰۲

پوریا

من از CKEditor استفاده کردم. فوق العادست. خیلی امکانات خوبی داره. هم زبان فارسی رو پشتیبانی میکنه و هم امکان استفاده یک تولبار برای چند تکست اریا رو میده. دیگه نیازی نیست برای هرکدوم تولبار داشته باشی!

۲۵ دی ۸۹ ، ۱۷:۲۴

مدیر

نصب ckeditor کاری نداره دوست عزیز
کافیه اسکریپت ckeditor رو لینک کنید تو صفحه و بعد یه textaria بزارید و خصوصیت کلاس رو بزارید ckeditor یعنی:

به همین راحتی

۱۱ اسفند ۸۹ ، ۱۵:۲۳

یونا

آقا لطفا یه توضیحی بده چطوری به صورت پیشفرض اینو راست به چپ کنیم.
(در مورد تاینی ام سی ایی)
حتی خودش دکمه rtl , ltr رو هم نداره!!!

۱۱ اسفند ۸۹ ، ۱۶:۰۹

Code::Blocks

سلام دوست عزیز
میتونید از افزونه های زیر برای راست چین کردن تینی استفاده کنید:
http://modxcms.com/extras/package/?package=387
اینم برای راست چین کردن تم:
http://modxcms.com/extras/package/?package=294
موفق باشید

۱۳ اسفند ۸۹ ، ۱۲:۰۶

بله ممنون، اما خودم درستش کردم! اینجوری:
((موارد 1 و 2 توی فایل content.css توی فولدر css و مورد سوم هم توی صفحه ی اصلی که می خواییم تاینی رو قرار بدیم))
1-اول برای justify right کردن: text-align: right; رو اضافه می کنیم توی بلاک body!
2-برای فونت پیشفرض تاهوما: جلوی font-family: فونت Tahoma رو اول می نویسیم!
3-و در نهایت برای راست به چپ شدن، توی سورس صفحه اصلیمون بعد از // General options
یه اینتر می زنیم و اضافه می کنیم : directionality : "rtl", تمومه!
شرمنده دیگه برای اونایی که کلاس کودکستان وب هستن توضیح دادم :دی

۲۲ اسفند ۸۹ ، ۱۹:۱۱

kawe

با سلام من یک قالب PHP دارم که می خواهم مثل Htmll روش کار کنم اما نمی دوم لطفا من را راهنمایی کنید که باید چه برنامه را به کار ببرم تا بتونم روز این قالب کار کنم و موضوعات ان را با موضوعات خود جای گزین کنم
اگر قلت املایی دارم من را ببخشید چون من خیلی وقت هست که در خارج از ایران به دنیا امدم و همکنون در ایران عزیز زندگی میکنم
خدانگهدار

۲۵ اسفند ۸۹ ، ۱۳:۳۵

shahinshyd

باسلام
اقا من میخوام با ادیتور TinyMCE کارکنم ولی با مثالی که تو سایتش گفته مشکل دارم
شما میتونی یک مثال بزنی که مثلا text area با id=ta این ادیتور برای بیاد
با تشکر

۲۶ اسفند ۸۹ ، ۱۵:۲۵

من که نفهمیدم چی می گید دوست عزیز
بهتره سوالاتتون رو توی انجمن مطرح کنید:
forum.iranphp.org
با تشکر

۲۶ اسفند ۸۹ ، ۱۵:۳۰

من با tinyMCE کار نکردم ولی مثالی که توی سایتش زده بسیار ساده و تمیزه.
با این حال با ckeditor (که شخصن توصیه اش می کنم به خاطر سادگی و قدرت و رایگان بودن و ...) به این صورت هست:
توی هدر صفحه لینک کنید به فایل جاوا اسکریپت CKEditor
و یه textarea می زارید و کلاسش رو می گید: ckeditor باشه
به این صورت

۳۱ ارديبهشت ۹۰ ، ۲۰:۳۶

علیرضا

سلام،
من با tinymce کار کردم و خیلی خیلی راضیم و هرکاری خواستم باهاش کردم از اون بهتر واقعاً از utf-8 پشتیبانی می کنه و اصلاً با کاراکتر های فارسی مشکلی نداره. جالبیش اینه که میتونی پوسته اش رو هم عوض کنی. البته نه ظاهر فقط! بلکه میتونی اینقدر ساده اش کنی که بدرد ویرایشگر کامنت گذاری بخوره یا اینقدر پیشرفته برای ویرایش مطالب سایت.

۰۹ خرداد ۹۰ ، ۰۷:۴۶

kazem121

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

۰۹ خرداد ۹۰ ، ۱۹:۱۶

مرتضی

سلام دوست من به نکته ی خوبی اشاره کردید
مدیریت فایل و عکس یکی از نیاز ها مهم تلقی میشه،می تونید از لینک زیر مشکلتون رو حل کنید:
http://www.tyssendesign.com.au/articles/cms/file-and-image-management-plugins-for-tinymce/
موفق باشید

۰۶ مرداد ۹۰ ، ۱۴:۱۶

Ehsan

با سلام و عرض خسته نباشید
من cleditor استفاده کردم
1طبق گفته شما کدها رو زدم
2-در یک فایل فراخوانی و اطلاعات رو به اس کی ال وارد کردم(چک کردم اطلاعات با صحت در اس کیو ال ثبت میشه)
3-حالا چجور بیام اطلاعات ارسالی رو نشون بدم که تگ هاشم کار کنه(با پرین خروجی گرفتم اطلاعات رو نشون داد
ولی تگ های استفاده شده را نشون نمیده که نبایدم بده!(میخوام مثل پست های صفحه اصلی تمام تگ های بکار برده شده در ویرایشگر مانند بولد-تغییر رنگ-عکسو...)رو نشون بده
ممنون از اطلاعات خوبی که دادید-خیلی دنبال این مطالب مفید میگشتم

۱۱ مرداد ۹۰ ، ۱۶:۵۵

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

۰۴ ارديبهشت ۹۱ ، ۱۷:۳۱

مهسا

با سلام
من YUI Rich Text Editor رو دانلود کردم.کلی فولدر و فایل داخلشه.نمیدونم دقیقا کدوم فایل جاوااسکریپتش رو باید لینک کنم.CKeditor هم همینطور.
لطفا راهنمایی کنید.
با تشکر

۰۴ ارديبهشت ۹۱ ، ۲۱:۳۵

سلام دوست عزیز
نصب CK رو دوستم تو کامنت های بالاتر گفتن براتون ولی من دوباره کاملتر میگم:
این کد رو تو پیچی که میخوایین از CK استفاده کنید اضافه کنید:

بعد یه TextArea بسازید و :

 This is some 

<br />
 CKEDITOR.replace( 'editor1' );<br />

نقطه ویرگول;

نقطه ویرگول;

هر از گاهی از هر چیزی

اخبار سایت

وردپرس

کیک پی اچ پی

لینوکس

سی اس اس 2

پی اچ پی

برنامه نویسی

اچ تی ام ال

zconf2010

مای اسکیو ال

نرم افزار

نرم افزار لینوکس

امنیت

seo

ای جکس

جاوااسکریپت

yii