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

- visibility ۴ mode_comment

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

tinymce4

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

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

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

tinymce1

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

tinymce2

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

tinymce3

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

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

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

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

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

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

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

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

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

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

مثلا :

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

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

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

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

comment دیدگاه کاربران
فاطمه

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

محمد اسفندیاری

لطفا اگه سوالی دارید در انجمن بپرسید
از آموزش خود سایت هم میتونین استفاده کنید
https://www.tinymce.com/docs/
موفق باشید

مهتاب خلیلی

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

محمد اسفندیاری

فایلهاتون رو زیپ کرده و بفرستید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.