استفاده از tinyMCE درون cms شخصی

این پست رو به خاطر درخواست یکی از دوستان عزیز میزارم و نحوه ی استفاده از ادیتور متنی tinyMCE رو در اینجا اموزش میدم همچنین پیش نمایش کار نهایی که انجام میدیم رو میتونید از اینجا ببینید(کلیک کنید) با من همراه باشید 😀

ما خیلی وقتا توی پروژه های خودمون نیاز به ادیتور یا ویرایشگر متنی داریم تا بتونیم توسط اون یه چیزی مثل تولبار office (البته خیلی ساده تر) داشته باشیم.

ویرایشگر متن چی هست ؟
ویرایشگر متن به چیزی میگن که نوشته کاربرها رو تبدیل می کنه به زبان HTML، درواقع کاربر درگیر استفاده از کد ها نمیشه، بلکه با فشار دادن دکمه هایی، نوشته خودش رو ویرایش میکنه و در خروجی کد HTML این نوشته ها نشون داده میشه.
ویرایشگر های بسیار زیادی توی اینترنت هستن، ولی خب انتخاب سلیقه ای هست , من از TinyMCE استفاده میکنم، به شما هم پیشنهاد می کنم ازش استفاده کنید و لذت ببرید.

ویژگی های ویرایشگر tinyMCE رو میشه به صورت زیر لیست کرد:

  1. متن باز بودن
  2. انعطاف بالا
  3. پشتیبانی از زبان فارسی
  4. در سیستم های مدیریت محتوا مثل وردپرس و جوملا استفاده میشه!
  5. پشتیبانی خوبی در مرورگرها داره و به خوبی اجرا میشه

خب بریم سراغ اینکه tinymice رو چجوری میشه گرفت و استفاده کرد , برای استفاده از tinymice مراحل زیر رو باید انجام بدیم:

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

مرحله اول :

دانلود tinymice رو میتونید از سایت اصلیش انجام بدید , کافیه اینجا کلیک کنید و بعدش درون صفحه ای که باز میشه روی دکمه ی دانلود کلیک کنید , اگه نمیدونید کجا کلیک کنید باید بگم که باید روی دکمه ی دانلود اولی کلیک کنید (Download TinyMCE Community) , بعد از اینکه دانلود رو انجام دادید نیاز دارید که زبان فارسی رو نیز برای ویرایشگر دانلود کنید. کافیه که به اینجا برید و زبان فارسی (persian) رو دانلود کنید و در پوشه ی langs مربوط به ویرایشگر قرار بدید.

دوستان عزیز اگه نتوستید tinyMCE رو از سایت اصلیش دانلود کنید , میتونید اون رو از انتهای همین پست نیز دانلود کنید 😀 ( اگه از فایل انتهای این پست استفاده میکنید باید بگم که من فایل مربوط به زبان فارسی رو نیز خودم توی پوشه ی langs قرار دادم و همه چیزش کامله)

مرحله ی دوم :

فایلی که دانلود کردید رو از حالت فشرده خارج کنید (از حالت زیپ شده خارج کنید) و بعدش فایل tinymce.min.js رو در قسمت body صفحه خودتون وارد کنید , مثلا به صورت زیر:

در کد بالا من یه تگ script نوشتم و ادرس فایل tinymce.min.js رو توش وارد کردم , به همین راحتی.

مرحله اخر:

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

در کد بالا من یه textarea به صفحه خودم اظافه کردم و یه تیکه کد جاوا اسکریپتی نوشتم و توش گفتم که ویرایشگر متنی رو به Textarea اظافه کنه ( در قسمت Selector ) و بعدش عرض و ارتفاع رو مشخص کردم (میتونید عرض و ارتفاع رو در حالت رسپانسیو بودن ذکر نکنید) , یه قسمت plugins نیز وجود داره که میتونید مشخص کنید علاوه بر ویرایشگر متنی چه چیزای دیگه ای وجود داشته باشه! مثلا من گفتم که print و preview هم و … هم وجود داشته باشه 😀 به همین سادگی.

اگه نیاز به تنظیمات بیشتری در tinyMCE دارید منتظر پست های بعدی باشید 😀 در پست های بعدی تنظیمات و نحوه استفاده از پوسته های ویرایشگر tinyMCE رو میگم.

دوستانی که سوال دارند یا مشکلی دارند میتونن از انتهای همین پست مطرح کنند تا پاسخ بدم. موفق باشید.

ویرایشگر متنی Tinymce به همراه مثالی از اون
341.8 KiB
39 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. پیمان

    من با مشکل برخوردم همین اولش.
    من ی فرم دارم که ب صورت ajax مقادیر را در دیتابیس mysql دخیره میکنه اما الان هر چی داخل این ادیتور میزنم ب صورت پوچ دخیره میشه.
    حالا چطور value وارد شده رو بگیرم ؟؟؟

    • اگه دقت کرده باشید ما یک textarea ایجاد میکنیم و به ادیتور معرفی میکنیم. شما کافیه برای اون textarea یک name تعریف کنید و بعدش با استفاده از اون name داده های درون textarea رو دریافت کنید. مثل حالت عادی که داده های درون فرم رو دریافت میکنید عمل کنید. اگه متوجه نشدید بگید تا یک مثال عملی براتون بزارم.

      • پیمان

        منظورتون رو متوجه شدم .کد گرفتن مقدار textarea در jquery بصور زیر میباشد:
        var body = $(“#body”).val();
        که عنصری با ای دی body رو مقدارشو میگیره و توسط load در بانک دخیره میکنه.
        اما پوچ ذخیره میکنه

        • باسلام
          در ظاهر کدتون باید درست باشه، احتمالا در نام عناصر اشتباهی شده. میتونید کدتون رو ایمیل کنید تا بررسی کنم
          mehran_707@yahoo.com

        • نحوه دریافت اطلاعات در tinymce یک مقدار متفاوت از حالت عادی یعنی inputهای معمولی هستن. در واقع با تبدیل یک textarea به یک ادیتورمتنی پیشرفته مانندtinymce نحوه دریافت اطلاعات نیز متفاوت از حالت عادی می باشد البته خیلی راحته!!!!
          و کافیه درکدتوت به جای
          var body = $(“#body”).val();
          قراردهید:
          var varname = tinyMCE.activeEditor.getContent();
          var body = tinyMCE.activeEditor.getContent();
          بررسی کنید اگه مشکلی بود مطرح کنید تا راهنمایی کنم

  2. علی طبا

    سلام
    چند سوال:
    ckfinder و ckeditor بهترن یا تاینی مایس؟ از لحاظ امنیت کدام بهتره؟
    قسمتی برای browse server یا لایبرری مدیاهای آپلود شده نداره؟
    امکان راست به چپ و بالعکس کجاست ؟
    تمیز کردن فرمت نوشته های ورد چطور ؟

    ممنون

    • سلام به شما دوست گرامی.
      ادیتور tinymce بهتر است , دلایل زیادی وجود داره. یکی از اون دلایل توانایی دستکاری تولبار و همه گیر بودن اونه , اگه دقت کرده باشید در جوملا و وردپرس نیز از tinymce استفاده میشه اما انتخاب کلا سلیقه ای هست و شما میتونید از ادیتورهای مختلف استفاده کنید و هیچ اجباری وجود نداره 😀
      لایبرری های متفاوتی برای کار با فایل ها و مدیا برای tinymce وجود داره کافیه که یه جستجو کنید , مثلا میتونید اینجا (کلیک کنید) رو یه نگاهی بندازید همچنین اینجا نیز یه فایل منیجر برای tinymce هست!
      از لحاظ امنیتی درون ادیتور مشکلی وجود نداره اما همیشه دقت داشته باشید که داده ها درون یک Textarea وارد میشن و شما بعد از دریافت داده ها از فرم باید نکات امنیتی رو بررسی کنید. خود ادیتور هیچگاه کدهای بد افزار تولید نمیکنه اما چون سمت کلاینت (کاربر) است میشه کدی رو به Textarea تزریق کرد.
      قابلیت های زیادی توی تولبار وجود داره و شما برای استفاده از اون باید ابتدا فعالسازیش کنید , یکی از این قابلیت ها چپ به راست و راست به چپ کردن نوشته هست! برای فعالسازی باید نام directionality رو در بخش plugins ذکر کنید و بعدش کلمات ltr rtl رو در بخش toolbar بزارید!!! اینجا نمیشه کد نوشت! اگه متوجه نشدید در فروم عضو بشید و سوال خودتون رو مطرح کنید تا پاسخ بگیرید.
      موفق باشید.

  3. سلام
    تو نسخه های جدید ظاهرا زبان فارسی رو نداره.
    از کجا میشه دانلودش کرد ؟

می‌خواهید دیدگاهتان را بیان کنید؟