المحرر المرئي
المحرر المرئي — تعديل الصفحة بالنقر وما يُحفظ في المشروع
المحرر المرئي يعرض صفحتك كما تبدو وتعدّلها بالنقر: تختار العنصر، فتكتب نصه في مكانه أو تغيّر نمطه من المفتّش، ويُحفظ التعديل تلقائياً في ملفات المشروع. لا يستهلك أي طلب ذكاء اصطناعي، فهو متاح في كل الباقات.
في هذه الصفحة
فتح المحرر المرئي
المحرر المرئي صفحة داخل مساحة عمل المشروع على المسار /projects/[id]/visual، وتفتحه من «المحرر المرئي» في الشريط الجانبي. هو شاشة المحرر نفسها لكن بلا لوحة محادثة: العمود الجانبي يعرض المفتّش، ورأس المعاينة يقول «تحرير الصفحة». لأنه لا يرسل أي طلب إلى الذكاء الاصطناعي فهو متاح في كل الباقات، ومنها «المجانية». للتعريف المختصر بالقسم انظر قسم المحرر المرئي.
اختيار عنصر وتعديله
- تأكّد أن وضع المحرر في الرأس هو «تحرير». الوضعان «تعليق» و«مشاهدة» يُطفئان أدوات التحرير ويلغيان الاختيار.
- مرّر المؤشر فوق الصفحة ليظهر إطار التحويم، ثم انقر العنصر. يظهر حوله إطار ومقابض تحجيم، وشريط عائم فيه: «تحريك»، «تحرير النص»، «تعليق»، «قفل أو فتح العنصر»، «تكرار»، «حذف»، «المزيد».
- لتعديل النص اضغط «تحرير النص» واكتب في مكان النص نفسه.
- لتعديل الشكل استخدم تبويبات المفتّش: «تصميم»، «تأثيرات»، «موضع»، «طبقات»، «حركة». الأربعة الأولى معطّلة حتى تختار عنصراً، ويظهر عليها «اختر عنصراً أولاً».
- زرّ الفأرة الأيمن أو «المزيد» يفتح قائمة السياق: «تحرير النصّ»، «المفتّش»، «تكرار»، «طبقة أعلى»، «طبقة أسفل»، «نسخ النمط»، «لصق النمط»، «إضافة قسم هنا»، «حذف»، وأوامر التجميع.
حين لا يكون شيء مختاراً يعرض العمود الجانبي لوحات «قوالب» و«أقسام» و«عناصر» و«نص» و«هوية» و«صفحة» و«وسائط»: منها تضيف أقساماً جاهزة ترث ألوان المشروع وخطوطه، أو تبحث عن نص في الصفحة وتستبدله بـ«استبدال الكل». أسفل اللوح أزرار الصفحات («إضافة صفحة»، «تكرار الصفحة»، «حذف الصفحة» — والرئيسية index.html لا تُحذف)، وزرّ «إضافة قسم»، والتكبير من 10٪ إلى 300٪.
بعض العناصر لا يُحفظ تعديلها، ويخبرك شريط معلومات العنصر بذلك: «هذا العنصر ديناميكي أو خادمي؛ يظهر للمعاينة فقط» أو «هذا العنصر مولّد أثناء التشغيل ولا يمكن حفظ تعديله».
الحفظ وما يُكتب في المشروع
حالة الحفظ في الرأس ثلاث: «يُحفظ…» و«محفوظ» و«● غير محفوظ». الحفظ تلقائي بعد ثانية ونصف من آخر تعديل، ويمكنك الحفظ يدوياً بـ Ctrl+S أو من قائمة «ملف» ثم «حفظ التغييرات». كل حفظ يُرسَل مع النسخة التي بدأت منها؛ فإن تغيّر المشروع من نافذة أخرى يُرفض الحفظ وتظهر رسالة في المفتّش، ويتوقّف الحفظ التلقائي حتى تقرّر أنت، وتبقى تعديلاتك على الشاشة.
- مشروع HTML: التعديل يُكتب في ملف HTML نفسه — النص داخل العنصر، والأنماط على العنصر المعرَّف بالسمة
data-mub-src. - مشروع Next.js: يحتاج المحرر نسخة HTML مستقلة. تظهر بطاقة «المحرر المرئي يحتاج نسخة HTML قابلة للتحرير» وزرّ «إنشاء نسخة HTML قابلة للتحرير»، وحتى تنجح يقول العمود الجانبي «أدوات العنصر تظهر بعد تجهيز نسخة التحرير». تُحفظ هذه النسخة منفصلة عن مصدر المشروع، وعند كل حفظ مرئي يحوّلها الخادم إلى Next.js ويكتب الاثنين معاً بعد حفظ نسخة رجوع باسم «قبل مزامنة تعديل مرئي إلى Next.js». وإذا حفظت الملفات لاحقاً من محرر الذكاء أو الكود تُمسح النسخة المرئية ويلزم إنشاؤها من جديد.
في مشاريع Next.js التي تُحرَّر عناصرها مباشرة كـ TSX، بعض الأوامر «غير متاح بعد»: حركات keyframes وقفل العنصر وتطبيق قالب كامل وإعادة ترتيب العناصر تُرفض برسالة ويبقى المصدر دون تغيير.
إعادة ترتيب الأقسام والعناصر
- الأقسام: في لوحة «أقسام» اسحب مقبض القسم إلى موضعه الجديد، أو ركّز على المقبض واستعمل الأسهم وHome وEnd، أو Alt مع الأسهم من أي مكان في الصف. Escape أثناء السحب يلغيه دون أي كتابة ويُعلن «أُلغي السحب؛ لم يتغيّر الترتيب».
- العناصر: في تبويب «طبقات» في المفتّش اسحب صفّ العنصر بين إخوته، أو ركّز على مقبضه واستعمل الأسهم. العنصر يُنقل بين إخوته في الحاضن نفسه فقط.
- من الصفحة مباشرة: Alt مع الأسهم على العنصر المختار، كما في جدول الاختصارات أدناه.
- القفل: القسم أو العنصر المقفول بـ«قفل أو فتح العنصر» لا يُنقل من أي مدخل، ويظهر قفل على مقبض القسم في لوحة «أقسام»، ويُعلَن الرفض برسالة تنتهي بـ«مقفل؛ افتح القفل لنقله».
- قارئ الشاشة: بعد كل نقل يُعلَن اسم القسم أو العنصر وموضعه الجديد من العدد الكلي، ويُعلَن أيضاً إن كان في أول الترتيب أو آخره فلم يتحرّك.
التراجع والإعادة
زرّا «تراجع» (Ctrl+Z) و«إعادة» (Ctrl+Y أو Ctrl+Shift+Z) ظاهران دائماً في الرأس وفي المفتّش، ويعملان أيضاً من قائمة السياق. التاريخ يحفظ حتى 50 خطوة في ذاكرة الصفحة المفتوحة، ولا يبقى بعد إعادة تحميلها؛ للرجوع إلى ما قبل ذلك استخدم سجل النسخ.
اختصارات لوحة المفاتيح
تعمل في وضع «تحرير» وحين لا يكون المؤشر داخل حقل كتابة. قائمتها الكاملة من «ملف» ثم «اختصارات لوحة المفاتيح» أو Ctrl+/.
| الاختصار | الفعل |
|---|---|
| Delete أو Backspace | حذف العنصر المختار |
| Ctrl+D | تكرار العنصر |
| Ctrl+C ثم Ctrl+V | نسخ العنصر ولصقه |
| Ctrl+Alt+C ثم Ctrl+Alt+V | نسخ النمط ولصقه على عنصر آخر |
| Ctrl+G / Ctrl+Shift+G | تجميع / فكّ التجميع |
| Alt+Shift+L | قفل العنصر أو فتحه |
| Alt+↑ / Alt+↓ | نقل القسم أو العنصر المختار خطوةً |
| Alt+Home / Alt+End | نقله إلى أول الترتيب أو آخره |
| Alt+→ / Alt+← | داخل صفّ أفقي في الصفحة: نحو البداية أو النهاية حسب اتجاه الصف |
| Esc | إلغاء الاختيار |
الحدود
- حجم المشروع محدود بباقتك؛ الحفظ الذي يتجاوزه يُرفض برسالة تنتهي بـ«ويتجاوز حدّ باقتك».
- المتعاون الذي صلاحيته في المشروع للقراءة فقط يرى تحت الرأس شريط «وضع المشاهدة — صلاحيتك في هذا المشروع للقراءة فقط، والتعديلات هنا لا تُحفظ.»، ولا يُرسل المحرر حفظاً له، والخادم يرفض الحفظ أيضاً.
- باقة «المجانية» تشمل حتى 1 مشروع، والمحرر المرئي والقوالب، ولا تشمل الذكاء الاصطناعي — انظر البناء بالذكاء الاصطناعي.
- على الجوال يصير اللوح ملء الشاشة، ويُفتح المفتّش ورقةً سفلية بعنوان «المفتّش» أو «تحرير العنصر».
- «تصدير HTML» و«تنزيل المشروع ZIP» في قائمة «ملف».
أسئلة شائعة
هل يستهلك المحرر المرئي من حصة الذكاء الاصطناعي؟
لا. التعديل والحفظ يمرّان بمسار حفظ المشروع لا بمسارات الذكاء الاصطناعي، ولهذا يعمل في الباقة المجانية.
لماذا رُفض الحفظ وتوقّف الحفظ التلقائي؟
لأن نسخة المشروع على الخادم تغيّرت بعد أن بدأت التعديل، غالباً من نافذة أخرى. تبقى تعديلاتك ظاهرة، والقرار لك قبل أي حفظ جديد.
لماذا أرى بطاقة «إنشاء نسخة HTML قابلة للتحرير»؟
لأن المشروع Next.js. المحرر المرئي يعمل على نسخة HTML مستقلة ويزامن تعديلاتك إلى Next.js عند الحفظ.