illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

tinymce : آموزش استفاده از یک ادیتور قدرمند

4 2119 ۲۰ فروردین ۹۴

در این مطلب میخوام یک ابزار جالب و کاربردی بنام tinymce رو خدمت شما معرفی کنم و نحوه استفاده از اونو آموزش بدم.

tinymce4

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

نحوه استفاده :

ابتدا باید به سایت مورد نظر وارد بشید :

tinymce1

با کلیک بر روی Download به صفحه مربوط به دانلود فرستاده میشید. در اونجا میتونین نسخه مورد نظرتون رو دانلود کنید :

tinymce2

بعد از دانلود شدن فایل مورد نظر رو از حالت فشرده در بیارین و محتویاتی شبیه به عکس زیر رو خواهید داشت :

tinymce3

حالا در کنار همین فایلها یک فایل دیگه بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو قرار دادیم. برای استفاده از این ابزار لازم نیس که همه موارد و فایلها رو تک تک وارد کنید ، با اضافه کردن tinymce.min.js خود به خود فایلهای مورد نیاز به سندتون اضافه میشن.

در مرحله اول باید المنتی که میخواید اونو بصورت ادیتور قرار بدین رو مشخص کنید. من در اینجا یک textarea قرار میدم :

حالا باید در تگ اسکریپت نهایی متد init از شی tinymce رو فراخوانی کنید :

میبینید که این متد یک ویژگی بنام selector داره که باید آدرس المنت مورد نظر رو بهش بدین. در اینجا آدرس textarea رو بهش دادیم. تا همینجا اگر در خروجی مشاهده کنید میبینید که کار انجام شده. اما شما میتونین با استفاده از پلاگینهایی که در این ابزار تعبیه شده ، این ادیتور رو پیشرفته تر و متناسب با کار خودتون در بیارین.

راهنمایی کلی در مورد تنظیمات این ادیتور در اینجا قرار داده شده است.

اگر بخواید عرض و ارتفاع این ادیتور رو تغییر بدین باید بصورت زیر عمل کنید :

میبینید که در بالا عرض رو 500 و ارتفاع رو 300 قرار دادم.

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

لیست کامل پلاگین ها و نحوه اضافه کردن هر کدام در اینجا قرار داره.

مثلا :

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

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام و عرض خسته نباشید . من واسه اولین بار میخوام یه وبسایت کامل طراحی کنم و میخوام که از این قابلیت تو سایتم استفاده کنم. یییییییییییییییییییییه دنیا ممنون میشم اگه راهنمایی کنین در مورد اینکه بخوام این ادیتور رو در بالای یک تکست باکسی که درون form view قرار داره بذارم.

  • ‏‏
    مهتاب خلیلی(۱۷ مرداد ۱۳۹۵)

    سلام وقتتون بخیر
    آموزشتون عالیه و همچنین سایتتون
    من برای استفاده از این ابزار ب مشکل برخوردم!
    من 3 تا textarea در یک صفحه از سایتم دارم و میخوام برای هر کدوم از این textarea ها ویرایشگر نمایش داده بشه ..
    من دو لینک js رو همانند اموزش بالا گذاشتم، فایل ها رو هم بردم، اما ویرایشگر رو نمایش نمیده!
    لطفا راهنماییم کنین.
    ممنونم

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram