Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
ادیتور tinymce
شاید تا به حال تو پروژه هایی که انجام دادین نیاز به ویرایشگر متن داشتین یا در آینده حتما خواهید داشت، در واقع دیدم بر اساس سوال کاربران تو این مبحث ظاهرا ابهام زیاد هست پس گفتم یه مطلبی بنویسم به عنوان راهنمایی و این که شاید بتونه مرجعی برای رفع سوال های بعضی از دوستان باشه .

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

ویرایشگر متن چی هست ؟

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

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

آموزش استفاده از TinyMCE :

قدم اول ( دانلود و فارسی سازی ) : می تونین آخرین ورژن این ویرایشگر رو از لینک زیر دانلود کنین :

TinyMCE – Download

شما باید لینک اول رو دانلود کنین . ( لینک دوم قابلیت های ویژه jQuery داره و لینک سوم برای توسعه دهنده ها هست . )

برای سازگار کردن با زبان فارسی، نیاز به بسته زبان فارسی دارین، بسته زبان فارسی رو می تونین از لینک زیر دانلود کنین :

TinyMCE – Languages for TinyMCE

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

بسته های دریافت کرده رو از حالت ZIP خارج کنید، از فایل دوم ( بسته زبان فارسی ) محتویات پوشه langs که همون تک فایل fa.js هست رو در پوشه ی langs از محتویات بسته اول ( یا همون فایل اصلی ویرایشگر ) به این آدرس کپی کنید:

tinymce -> js -> tinymce -> langs

( یا می تونین فایل نمونه ای که آخر مطلب هست رو دانلود کنید، در فولدر tinymce اطلاعات مورد نیاز شما برای استفاده در سایر پروژه ها موجود هست . )

قدم دوم ( بارگذاری در صفحه HTML ) : برای استفاده از این ویرایشگر، پوشه tinymce دوم از مسیر بالا را در هاست آپلود میکنیم یا در سرور محلی خود کپی می کنیم، یک فایل HTML ایجاد می کنیم و کد های زیر رو توش می نویسیم : ( به آدرس دهی صحیح به فایل tinymce.min.js دقت شود . )

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
language : fa
});
</script>
<form method="post">
<textarea></textarea>
</form>

در خط اول فایل جاوا اسکریپت رو آدرس دهی میکنیم و در خط های ۲ الی ۷ اختصاص داره به تنظیمات این ویرایشگر، معنی خط چهارم این هست که تمام عناصر textarea که در صفحه موجود هست با استفاده از tinyMCE بارگذاری بشن، خط پنجم هم برای تغییر زبان به فارسی هست .

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

قدم سوم ( تابع tinymce.init و اضافه کردن پلاگین ها ) : تمام تنظیمات این ویرایشگر بر اساس فایل tinymce.init انجام میشه، از جمله اضافه کردن پلاگین ها و یا تغییرات ظاهری. من تابع تنظیماتی رو میزارم که حاصلش عکس این مطلب میشه :

1
2
3
4
5
6
7
tinymce.init({
selector: "textarea",
language : fa,
plugins : link,
menubar:false,
statusbar: false,
});

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

1
2
3
4
tinymce.init({
...
plugins : advlist autolink link image lists charmap print preview
});

لیستی از پلاگین های موجود رو میتونین در پوشه plugins مشاهده کنین.

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

برخورد مرورگر ها و یا زبان های برنامه نویسی با این ویرایشگر دقیقا مشابه یک textarea معمولی هست با خاصیت های معمول که در فورم ها موجود هست، می تونید با روش های معمولی به اطلاعات دسترسی داشته باشین ( مثل متدهای action و get ) .

مشکل تغییر فونت به حالت پیش فرض هنگام استفاده از فونت های فارسی در TinyMCE :

در یکی از پروژه هام از فونت های فارسی استفاده کردم و  همچنین برای قسمت مدیریت سایت این ویرایشگر متن استفاده شده بود، پروژه کامل شد و من پروژه رو تحویل دادم. بعد از مدتی که سایت فعالیت کرد، من برای دیدن حاصل نهایی کار وارد سایت شدم، وقتی وارد قسمت اخبار سایت شدم، دیدم در بعضی از خبرها در نقاطی تصادفی، فونت یکی از خطوط نوشته شده به حالت پیش فرض صفحه تبدیل میشه ( برای مثال تبدیل به فونت arial میشه )، وقتی وارد پایگاه داده شدم و متن مطالب رو بررسی کردم، متوجه حضور فاصله جدا نشدنی ( یا non-breaking-space ) در متن بعضی از خبرها شدم و بعد از حذف اون فهمیدم که مشکل تغییر حالت فونت بعضی از خطوط از همین کد هست .

tinyMCE error

تصویری که در بالا مشاهده میکنین حاصل کد زیر هست، که در اون فونت نازنین سری B لود شده است :

1
بنی آدم اعضای یکدیگرند بنی آدم اعضای یکدیگرند بنی آدم اعضای یکدیگرند &nbsp; بنی آدم اعضای یکدیگرند

همینطور که میبینین در این کد استایل خاصی استفاده نشده و کل متن با یک استایل نوشته شده، ولی نتیجه نهایی کد در خط سوم با بقیه خطوط متفاوت هست، نمیدونم این ناسازگاری به وجود آمده از استاندارد نبودن فونت ها هست یا از سیستم عامل یا حتی ورژن مرورگر ( ویندوز هشت – گوگل کروم ورژن ۳۲ ) به هر حال بعد از کمی تحقیق فهمیدم که این فاصله جدا نشدنی به خاطر auto-save خود ویرایشگر متن توی کدها ظاهر میشه و بعد از تغییر کوچکی توی تابع  tinymce.initمشکل حل شد، کد نهایی تابع تنظیمات من به این صورت هست :

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
tinymce.init({
selector: "textarea",
language : fa,
plugins : link,
menubar:false,
statusbar: false,
paste_auto_cleanup_on_paste : true,
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML.replace(/&nbsp;/ig, " ");
}
});
</script>

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



1394/05/03 4:34:24 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
 
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما