کار با ویرایشگر TinyMCE

ویرایشگر TinyMCE چیست؟ 

ویرایشگر TinyMCE (مخفف Tiny Moxiecode Content Editor) یکی از محبوب‌ترین ویرایشگرهای WYSIWYG (What You See Is What You Get) است که به صورت پیش‌فرض در سیستم مدیریت محتوای جوملا مورد استفاده قرار می‌گیرد. این ویرایشگر به کاربران این امکان را می‌دهد که محتوای خود را به سادگی و بدون نیاز به دانش کدنویسی HTML، ویرایش و فرمت بندی کنند. 

 اهمیت استفاده از ویرایشگر پیشرفته در جوملا 

جوملا به عنوان یک CMS (سیستم مدیریت محتوا) قدرتمند، نیازمند ابزاری کاربرپسند برای ایجاد و ویرایش محتواست. ویرایشگر TinyMCE با امکاناتی مانند: 

- فرمت‌دهی متن (پررنگ، ایتالیک، لیست‌ها، ترازبندی) 

- درج رسانه (تصاویر، پیوندها، جداول) 

- پشتیبانی از کد HTML (برای کاربران حرفه‌ای) 

- امکانات SEO (بهینه‌سازی برای موتورهای جستجو) 

تجربه‌ای روان و حرفه‌ای را در تولید محتوا ارائه می‌دهد. 

 چرا یادگیری TinyMCE مهم است؟ 

اگر شما: 

✅ مدیر سایت جوملا هستید، 

✅ محتواگذار (نویسنده، ویراستار) محسوب می‌شوید، 

✅ یا حتی یک توسعه‌دهنده که می‌خواهد ویرایشگر را سفارشی‌سازی کند، 

آشنایی با تمام قابلیت‌های TinyMCE به شما کمک می‌کند تا: 

- سریع‌تر و حرفه‌ای‌تر محتوا تولید کنید. 

- از امکانات پیشرفته مانند جدول‌ها، استایل‌ها و ابزارهای SEO استفاده نمایید. 

- از خطاهای رایج در فرمت‌دهی متن جلوگیری کنید. 

در این مجموعه، به طور کامل و تصویری با تمام بخش‌های ویرایشگر TinyMCE در جوملا آشنا خواهید شد. 

آشنایی با محیط TinyMCE

۱. نمای کلی ویرایشگر

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

1. ابتدا وارد صفحه مطالب شوید.

2. بر روی دکمه جدید کلیک کنید تا وارد صفحه ای شوید که بتوانید یک مطلب ایجاد کنید.

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

تصویر فوق یک نمای کلی از ویرایشگر را ارائه می دهد که دارای سه قسمت می باشد:

🛠️ نوار ابزار اصلی: کادر قرمز رنگ در بالای تصویر فوق

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

🔍 نوار وضعیت: کادر بنفش در انتهای تصویر فوق

۲. حالت‌های نمایش

به علت تنوع زیاد در بخش نوار ابزار، ویرایشگر را در دو حالت کامل و ساده می توان دید.

حالت کامل (Full):

حالت ساده (Basic):

نحوه تغییر حالت:

با کلیک بر روی دکمه «...» مانند شکل زیر می توانید به دو حالت ساده و کامل سوئیچ کنید.

۳. تنظیمات اولیه

تغییر اندازه:

1. نشانگر موس را روی گوشه پایین سمت راست نگه دارید.

2. بر روی آن کلیک و بکشید تا اندازه تغییر کند.

تغییر ویرایشگر

می توانید کلا ویرایشگر را در تایپ خودتان نادیده بگیرید. فقط کافی است بر روی دکمه «Toggle Editor» کلیک کنید. با این کار موقتا ویرایشگر را غیر فعال کرده و متن خالص (بدون هرگونه قالب بندی) خواهید دید.

منو ها و ابزارها

همانطور که در تصاویر پیشین مشاهده کردید، ویرایشگر دارای 6 عنوان منو است:

- ویرایش: مربوط به اصلاح موارد تایپ شده است.

- اضافه کردن: مربوط به افزودن عناصری مانند تصویر، ایموجی، ویدئو و ... می باشد.

- نمایش: مربوط به نحوه نمایش ویرایشگر مانند تمام صفحه، نمایش در حالت کدنویسی و ... است.

- قالب: این منو مربوط به فرمت بندی کلمات تایپ شده است. مانند اندازه فونت، نوع فونت، استایل فونت و ...

- جدول: همانطور که از نامش پیداست با آیتم های  این منو می توان یک جدول ایجاد و آن را مدیریت کرد.

- ابزارها: مربوط به سایر امکانات ویرایشگر می باشد.

اگر ویرایشگر را در حالت کامل (Full) تنظیم کنید و ماوس را روی هر یک از شکلک ها قرار دهید، متوجه خواهید شد که هر یک از شکلک ها در واقع ابزاری برای دسترسی سریع تر به هر یک از آیتم های منو است. بنابراین چه از طریق ابزار ها و چه از طریق آیتم های منو در مورد ویرایشگر کنکاش کنیم در واقع به یک هدف رسیده ایم.

نکته: فقط دقت کنید که قسمت «CMS Content» در واقع جزء اصلی ویرایشگر نیست و گزینه های آن در واقع پلاگین هایی هستند که توسط توسعه دهندگان به ویرایشگر اضافه می شوند. بنابراین هیچ آیتم منویی ندارند. همچنین بعضی از آیتم ها فاقد ابزار سریع هستند مانند آیتم منوی «انتخاب همه» از منوی ویرایش که به علت استفاده خیلی کم از این آیتم، هیچ ابزاری ندارد.

شروع کار با ویرایشگر

اگر با نرم افزارهای واژه پرداز مانند «Microsoft-word» کار کرده باشید، متوجه شدید که ویرایشگر TinyMCE شباهت زیادی به این دست از نرم افزارها دارد. برای شروع عبارت زیر را در ویرایشگر تایپ کنید. (لطفا فقط تایپ کنید و کپی نکنید تا تجربه تایپ را هم ببینید)

" لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است."

اگر به نوار وضعیت در پایین ویرایشگر دقت کنید عبارت «words: 18» را خواهید دید. همینطور عبارت «p» را هم در همین نوار ابزار می بینید.

عبارت «words: 18» نمایانگر تعداد کلمات تایپ شده است. و عبارت «p» هم این مطلب را آشکار می کند که، متنی که وارد کردید در چه تگی از تگ های HTML است. البته اگر آشنایی با تگ HTML ندارید نگران نباشید؛ این صرفا یک اطلاعیه برای مدیریت بهتر است.

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