راهنمای استفاده از ویرایشگر متن و HTML TinyMCE
سیستم فروش‌گستر برای مدیریت و تولید محتوای صفحات مختلف فروشگاه اینترنتی از ویرایشگر پیشرفته TinyMCE استفاده می‌کند.
این ابزار به مدیران فروشگاه امکان می‌دهد بدون نیاز به دانش کدنویسی، محتوای متنی و چندرسانه‌ای را به‌صورت حرفه‌ای و با امکانات کامل ایجاد و ویرایش کنند.
با امکانات گسترده ویرایشگر TinyMCE در پنل مدیریت فروش‌گستر، شما می‌توانید:
- محتوای حرفه‌ای تولید کنید.
- تصاویر و ویدئوها را به‌راحتی مدیریت کنید.
- جداول و لینک‌های داخلی/خارجی درج کنید.
- و در صورت نیاز، با بخش HTML Source طراحی‌های پیشرفته یا بهینه‌سازی سئو را انجام دهید.
✅ به کمک این ادیتور و پشتیبانی از Bootstrap، دست شما برای طراحی و تولید محتوا در فروشگاه اینترنتی کاملاً باز است.
معرفی ابزارهای مهم TinyMCE
📝 ویرایش متن
- B (Bold) → برجسته‌سازی متن
- I (Italic) → ایتالیک کردن متن
- U (Underline) → زیرخط
- 🔠 Heading → تنظیم تیترها (H1 تا H6)
- ☰ لیست شماره‌دار / گلوله‌ای
- ↔ تراز متن (راست، چپ، وسط، Justify)
⚠️ نکته مهم: استفاده درست از Headingها (H1-H6) به بهینه‌سازی سئو کمک زیادی می‌کند. توصیه می‌شود در متن‌های طولانی از H2 و H3 برای دسته‌بندی استفاده کنید.
🔗 مدیریت لینک‌ها
- 🔗 افزودن لینک داخلی یا خارجی
- ✏️ ویرایش لینک
- ❌ حذف لینک
🖼 درج رسانه (تصویر و ویدئو)
- 🖼 افزودن تصویر از کامپیوتر یا سرور
- ▶️ قرار دادن ویدئو (مانند یوتیوب یا آپارات)
- ⚙️ تنظیم اندازه، تراز و متن جایگزین (Alt) برای تصاویر
💡 نکته سئو: حتماً برای تصاویر متن جایگزین (Alt) وارد کنید تا رتبه صفحات شما در گوگل بهتر شود.
📊 جدول‌ها
- ➕ ایجاد جدول
- ↔ ادغام سلول‌ها
- 🎨 تغییر رنگ پس‌زمینه و استایل جدول
💻 کد منبع (HTML Source)
آیکون: <>
با کلیک روی این آیکون، یک پنجره باز می‌شود که محتوای شما به‌صورت کد HTML نمایش داده می‌شود. این بخش مخصوص کاربران حرفه‌ای است که می‌خواهند:
- محتوای خود را برای سئو بهینه‌سازی کنند.
- کدهای سفارشی Bootstrap (مانند دکمه‌ها، گریدها و کارت‌ها) اضافه کنند.
- استایل‌های اختصاصی CSS یا اسکریپت‌های خاص وارد کنند.
⚠️ هشدار: استفاده نادرست از این بخش ممکن است باعث به‌هم‌ریختگی قالب یا مشکلات امنیتی شود. لطفاً تنها در صورتی تغییرات انجام دهید که با HTML و Bootstrap آشنایی دارید.
⚙️ سایر امکانات پرکاربرد
- ↩️ Undo / Redo → بازگردانی تغییرات
- 🔍 جستجو و جایگزینی متن
- 🌐 پشتیبانی از زبان فارسی و حالت راست‌به‌چپ (RTL)
- 🖥 حالت Full Screen → مناسب برای ویرایش متن‌های طولانی
هماهنگی با قالب‌های فروش گستر (Bootstrap)
قالب‌های طراحی شده در سیستم فروش گستر بر پایه Bootstrap هستند.
این یعنی اگر در ادیتور TinyMCE از کامپوننت‌های Bootstrap مانند:
- 🔘 دکمه‌ها (Buttons)
- 🗂 کارت‌ها (Cards)
- 📐 گریدها (Grid System)
- 🚨 هشدارها (Alerts)
استفاده کنید، به‌صورت کاملاً هماهنگ با قالب نمایش داده خواهند شد.
💡 نکته: برای داشتن محتوای حرفه‌ای، پیشنهاد می‌شود به‌جای استایل‌دهی دستی، از کامپوننت‌های آماده Bootstrap استفاده کنید. به این ترتیب طراحی فروشگاه شما همیشه استاندارد و هماهنگ باقی می‌ماند.
شورت‌کات‌های پرکاربرد TinyMCE
⌨️ برای سرعت بیشتر در تولید محتوا، TinyMCE مجموعه‌ای از کلیدهای میانبر دارد که به شما کمک می‌کند بدون استفاده از ماوس، عملیات مهم را انجام دهید:
| شورت‌کات | عملکرد |
|---|---|
| Ctrl + B | 🔠 بولد (Bold) کردن متن |
| Ctrl + I | I ایتالیک (Italic) کردن متن |
| Ctrl + U | U زیرخط (Underline) |
| Ctrl + Z | ↩️ بازگشت (Undo) |
| Ctrl + Y یا Ctrl + Shift + Z | ↪️ تکرار عمل (Redo) |
| Ctrl + A | انتخاب همه متن |
| Ctrl + X | ✂️ برش (Cut) |
| Ctrl + C | 📋 کپی (Copy) |
| Ctrl + V | 📥 پیست (Paste) |
| Ctrl + K | 🔗 افزودن یا ویرایش لینک |
| Ctrl + Shift + K | ❌ حذف لینک |
| Ctrl + F | 🔍 جستجو در متن |
| Ctrl + H | 🔄 جستجو و جایگزینی متن |
| Ctrl + 1 تا Ctrl + 6 | انتخاب تیترها (Heading H1 تا H6) |
| Ctrl + Alt + F | 🖥 ورود به حالت تمام صفحه (Full Screen) |
| Ctrl + Alt + T | 📊 ایجاد جدول جدید |
| Alt + F10 | رفتن به نوار ابزار TinyMCE |
| Esc | خروج از نوار ابزار یا مودهای باز مثل تمام‌صفحه |
💡 نکته کاربردی: استفاده از شورت‌کات‌ها مخصوصاً برای ویرایش محتوای طولانی باعث صرفه‌جویی چشمگیر در زمان می‌شود.
پرسش‌های کاربران
چرا هنگام ویرایش مقاله در وبلاگ، تگ‌های HTML مثل H2 روی کل متن اعمال می‌شوند؟
این مشکل معمولاً زمانی رخ می‌دهد که در ویرایشگر HTML (TinyMCE)، به‌جای انتخاب دقیق عنوان، کل بلوک متن انتخاب می‌شود. برای جلوگیری از این موضوع، لطفاً مراحل زیر را دنبال کنید:
-
انتخاب دقیق متن: هنگام اعمال تگ عنوان (مثل H2)، فقط خود عنوان را انتخاب کنید و مطمئن شوید سایر بخش‌های متن انتخاب نشده‌اند.
-
استفاده از گزینه "پاک کردن قالب‌بندی" (Clear Formatting): قبل از اعمال تگ جدید، از این گزینه (آخرین آیکون در نوار ابزار قالب‌بندی) استفاده کنید تا فرمت‌های قبلی حذف شوند و از تداخل جلوگیری شود.
-
استفاده از کلیدهای ترکیبی هنگام جای‌گذاری محتوا: اگر محتوایی را از منبع دیگری کپی می‌کنید، توصیه می‌شود از کلیدهای Ctrl + Shift + V استفاده کنید تا متن بدون قالب‌بندی و کدهای اضافی وارد شود. سپس می‌توانید قالب‌بندی دلخواه خود را اعمال نمایید.