محرر HTML v2.0
محرر HTML مجاني عبر الإنترنت مع محرر مرئي مباشر وعرض للشيفرة، متزامنين. الصق من Word أو Google Docs ونظّف شيفرة HTML الفوضوية بنقرة واحدة. كل شيء يعمل في متصفحك.
عن محرر HTML
محرر HTML أونلاين هو محرر مجاني يعمل داخل المتصفح ويجمع بين لوحة تحرير مرئية (WYSIWYG) ولوحة شيفرة مصدرية، وتبقى اللوحتان متزامنتين لحظة بلحظة. المشكلة التي تعالجها الأداة محددة وليست عامة: الشيفرة الفوضوية التي تنتج عند اللصق من Word أو Google Docs، والتنقل المرهق بين وضع التحرير ووضع المعاينة. نسخة 2.0 من الأداة على ToolsPivot تعمل بالكامل على جهازك، فما تكتبه لا يُرفع إلى أي خادم، والواجهة متوفرة بثماني عشرة لغة من بينها العربية.
نظرة عامة على الأداة
الوظيفة الأساسية
تعمل الأداة بلوحتين متزامنتين: لوحة مرئية مبنية على منطقة contenteditable أصلية في المتصفح، ولوحة شيفرة مبنية على CodeMirror 5.51 في وضع htmlmixed مع أرقام الأسطر وتلوين الصياغة. حين تكتب في اللوحة المرئية، يمر الناتج عبر js-beautify ثم يُكتب في لوحة الشيفرة منسقًا؛ وحين تعدّل الشيفرة مباشرة، ينعكس التعديل على اللوحة المرئية. جميع المكتبات مستضافة محليًا على ToolsPivot دون أي CDN خارجي، وهو ما يبقي الأداة سريعة ومستقلة.
المستخدمون الرئيسيون
تخدم الأداة أربع فئات بوضوح: محررو المحتوى الذين ينقلون نصوصًا من Word إلى نظام إدارة محتوى، ومطورو الواجهات الذين يحتاجون تنظيف مقتطف أو التحقق من إغلاق وسومه، ومديرو المتاجر الإلكترونية الذين يكتبون أوصاف منتجات بتنسيق HTML، والمدونون الذين يعدّلون قوالبهم. من يقيس جودة نصه قبل النشر يمكنه إكمال العملية عبر عداد الكلمات أو مدقق قابلية القراءة.
المشكلة والحل
عند لصق مستند Word في أي محرر ويب عادي، تأتي معه أنماط mso- ووسوم o:p ومئات من عناصر span وfont الفارغة وفئات لا معنى لها خارج Word. هذه الزيادة تضخّم حجم الصفحة وتكسر تنسيق الموقع. تعترض الأداة محتوى الحافظة قبل وصوله إلى المحرر وتنظفه من هذه العناصر، فيصل النص إلى المحرر بشيفرة قابلة للنشر مباشرة بدل ساعة من التنظيف اليدوي.
الفوائد الرئيسية
- مزامنة ثنائية الاتجاه: ترى الشيفرة والنتيجة في الوقت نفسه بدل التبديل بين تبويبين، فتلتقط الخطأ في اللحظة التي يحدث فيها.
- تنظيف لصق Word بنقرة: ينتهي أشهر مصدر للشيفرة الفوضوية في العمل التحريري العربي دون أدوات وسيطة.
- خصوصية فعلية للنص المحلي: الكتابة والتنظيف والتصدير والتحقق تحدث في متصفحك، ولا يُرسل شيء من ذلك إلى خادم.
- تحقق يشير إلى السطر: بدل رسالة خطأ عامة، تحصل على اسم الوسم ورقم السطر الذي يحتاج إصلاحًا.
- تصدير بثلاث صيغ: نسخ HTML، أو نسخ Markdown، أو تنزيل مستند .html كامل جاهز للرفع.
- حفظ تلقائي للمسودة: تُحفظ المسودة محليًا وتُستعاد عند العودة، فلا يضيع العمل بإغلاق التبويب سهوًا.
- بلا تثبيت وبلا حساب: تفتح الصفحة وتبدأ العمل فورًا، بلا تسجيل ولا اشتراك.
- واجهة بثماني عشرة لغة: يعمل الفريق العربي بواجهة عربية بدل تخمين معاني الأزرار الإنجليزية.
الميزات الأساسية
- لوحة مرئية أصلية: منطقة contenteditable حقيقية تنتج HTML نظيفًا بدل شيفرة مصطنعة تحتاج معالجة لاحقة.
- لوحة شيفرة CodeMirror: تلوين صياغة وأرقام أسطر في وضع htmlmixed، مع إضافات البحث والحوار.
- تنظيف اللصق الذكي: إزالة أنماط mso- ووسوم o:p والعناصر الفارغة والفئات والمعرّفات الشاردة قبل دخول المحتوى.
- مجموعة التنظيف: خمسة إجراءات بنقرة واحدة: إزالة الأنماط المضمنة، إزالة الفئات والمعرّفات، حذف الوسوم الفارغة، دمج المسافات، والتحويل إلى نص عادي.
- تنسيق وتصغير: js-beautify يرتب الشيفرة بمسافات بادئة، والمصغّر يجمعها في سطر واحد قبل النشر النهائي.
- تصدير Markdown: تحويل المحتوى إلى Markdown عبر Turndown لمن ينشر على منصات تعتمد هذه الصيغة.
- استيراد ملف محلي: رفع ملف من جهازك عبر FileReader، ومع المستندات الكاملة تُبقي الأداة محتوى body فقط.
- استيراد سحابي: اختيار ملف من Google Drive أو Dropbox، مع تحويل ملفات docx وpdf إلى نص قابل للتحرير.
- التحقق من الوسوم: محلل يمشي على الشيفرة ويحترم قواعد الإغلاق الاختياري لوسوم مثل li وtr وtd وp، ويتجاهل script وstyle والتعليقات لتفادي الإنذارات الكاذبة.
- أدوات الإدراج: روابط، صور برابط أو برفع مباشر، جداول مع تحرير الصفوف والأعمدة، تضمين فيديو من YouTube أو Vimeo في إطار متجاوب، خط أفقي، وستة وثلاثون رمزًا خاصًا.
- بحث واستبدال: إيجاد نص أو وسم واستبداله داخل لوحة الشيفرة دون مغادرة المحرر.
- أوضاع عرض ثلاثة: مقسّم، أو شيفرة فقط، أو مرئي فقط، إضافة إلى ملء الشاشة والوضع الداكن الذي يُحفظ اختياره.
كيف تعمل الأداة
- افتح المحرر: انتقل إلى صفحة محرر HTML على ToolsPivot من أي متصفح، وستستعيد الأداة مسودتك السابقة إن وجدت.
- أدخل المحتوى: اكتب في اللوحة المرئية، أو الصق من Word، أو ارفع ملفًا محليًا، أو اختر ملفًا من Drive أو Dropbox.
- نظّف الناتج: شغّل تنظيف HTML أو اختر إجراءً محددًا من قائمة التنظيف حسب ما تحتاجه الشيفرة.
- تحقق من الوسوم: شغّل التحقق لتحصل على قائمة بالوسوم غير المغلقة أو غير المتطابقة مع رقم كل سطر.
- نسّق أو صغّر: رتّب الشيفرة بمسافات بادئة للمراجعة، أو صغّرها في سطر واحد قبل الرفع.
- صدّر عملك: انسخ HTML، أو انسخ Markdown، أو نزّل مستند .html كاملًا. ولتقليص الحجم أكثر قبل الرفع يفيد ضاغط HTML.
متى تستخدم الأداة
تكون الأداة الخيار الأنسب حين يكون العمل على قطعة HTML واحدة تحتاج تحريرًا أو تنظيفًا أو تحققًا سريعًا. أما المشاريع متعددة الملفات ذات نظام بناء فمكانها بيئة تطوير مثبتة.
- نقل مقال من Word: حين تسلّمك محررة نصًا في Word وتريد نشره على ووردبريس بشيفرة نظيفة.
- كتابة وصف منتج: حين تحتاج جدول مواصفات أو قائمة نقطية داخل حقل وصف المنتج في متجرك.
- إصلاح تخطيط مكسور: حين ينهار تصميم صفحة بسبب وسم واحد غير مغلق وتريد تحديده برقم السطر.
- تجهيز قالب بريد: حين تبني رسالة بجداول HTML وتحتاج رؤية البنية والنتيجة معًا.
- تحويل إلى Markdown: حين تنقل محتوى موجودًا بصيغة HTML إلى منصة توثيق أو مستودع يعتمد Markdown.
- تدريس أساسيات HTML: حين يحتاج المتدرب رؤية أثر الوسم على العرض في اللحظة نفسها.
- تنظيف شيفرة موروثة: حين تستلم صفحة محشوة بأنماط مضمنة وفئات ميتة وتريد تجريدها بنقرات.
- مقارنة نسختين: حين تريد معرفة ما تغيّر بين شيفرتين، وهنا يكمل مقارن النصوص المهمة.
حالات استخدام من السوق العربي
متجر سلة في الرياض
السياق: مسؤول محتوى في متجر إلكتروني سعودي على منصة سلة يتسلم مواصفات المنتجات في ملفات Word من الموردين.
- يلصق المواصفات في اللوحة المرئية فتُنظف أنماط Word تلقائيًا
- يبني جدول مواصفات ويحذف الفئات والمعرّفات المتبقية
- ينسخ HTML النهائي ويلصقه في حقل وصف المنتج
النتيجة: وصف منتج بشيفرة موجزة تتوافق مع قالب المتجر بدل شيفرة Word التي تكسر التنسيق. ويمكن قياس أثر الشيفرة على وزن الصفحة عبر مدقق نسبة الشيفرة إلى النص.
وكالة محتوى في دبي
السياق: وكالة إماراتية تدير صفحات علامات تجارية تبيع عبر نون وتحتاج تسليمًا نظيفًا لعميلها.
- يستورد الفريق مسودة العميل من Google Drive مباشرة
- يشغّل التحقق ليكتشف الوسوم غير المغلقة قبل التسليم
- يصدّر نسخة HTML للموقع ونسخة Markdown للتوثيق الداخلي
النتيجة: ملف تسليم واحد بصيغتين دون أدوات تحويل إضافية. وقبل النشر يراجع الفريق وسوم الصفحة عبر مولد وسوم الميتا.
ناشر إلكتروني في القاهرة
السياق: موقع مصري ينشر عشرات المقالات أسبوعيًا يستلمها الكتّاب بصيغة Word.
- يرفع المحرر ملف المقال ويحتفظ المحرر بمحتوى body فقط
- يزيل الأنماط المضمنة ويدمج المسافات الزائدة
- ينزّل الملف أو ينسخ الشيفرة إلى نظام النشر
النتيجة: مقالات بشيفرة موحدة عبر الموقع كله، وهو ما يقلل مشاكل العرض ويخدم سرعة الصفحة.
فريق تسويق في الكويت
السياق: متجر كويتي يقبل الدفع عبر KNET ويجهّز رسائل بريدية موسمية لعروضه.
- يبني الفريق قالب الرسالة بجداول HTML داخل اللوحة المرئية
- يستخدم البحث والاستبدال لتحديث الروابط دفعة واحدة
- يصغّر الشيفرة وينسخها إلى منصة إرسال البريد
النتيجة: قالب بريد ببنية جدولية متوافقة مع عملاء البريد التقليديين، جاهز للإرسال في الموسم دون مرحلة تنظيف إضافية.
كيف يقارَن المحرر بالمحررات المجانية المعتادة
الفارق الجوهري ليس في عدد الأزرار بل في نموذج التحرير نفسه. أغلب المحررات المجانية تفصل بين وضع التحرير ووضع المعاينة وتطلب منك التبديل بينهما، بينما تعرض هذه الأداة اللوحتين معًا وتزامنهما في الاتجاهين. الفوارق العملية الأخرى:
- اللصق من Word: منظف مدمج يعمل بنقرة، مقابل تنظيف يدوي أو ناتج فوضوي.
- التصدير: HTML وMarkdown وتنزيل ملف، مقابل زر نسخ وحيد في الغالب.
- الاستيراد: ملف محلي وGoogle Drive وDropbox، مقابل اللصق فقط.
- التحقق: وسوم غير مغلقة أو غير متطابقة مع أرقام أسطرها، مقابل غياب التحقق تمامًا.
- المعالجة: تجري في متصفحك، مقابل معالجة على الخادم في كثير من الأدوات.
- الإضافات: وضع داكن وحفظ تلقائي وثماني عشرة لغة، وهي نادرة في هذه الفئة.
حدود الأداة بصراحة
ما يلي قيود حقيقية نذكرها لأن معرفتها مسبقًا توفّر وقتك، وأغلب المنافسين لا يذكرونها:
- الاستيراد السحابي يمر بالخادم: اختيار ملف من Google Drive أو Dropbox يعني تمرير الملف عبر خادمنا لقراءته. الكتابة والتنظيف والتصدير والتحقق لا تغادر متصفحك، أما الاستيراد السحابي فيغادر. إن كان الملف حساسًا، استخدم الرفع المحلي بدلًا منه.
- ليست بيئة تشغيل JavaScript: اللوحة المرئية تعرض بنية HTML وتنسيقها، ولا تشغّل السكربتات كما تفعل صفحة حقيقية. لاختبار سلوك سكربت تفاعلي تحتاج متصفحًا يفتح الصفحة فعليًا. ولتصغير ملفات السكربتات والأنماط استخدم أدوات مخصصة مثل مصغّر CSS.
- التحقق ليس مدققًا كامل المواصفة: المحلل يرصد الوسوم غير المغلقة وغير المتطابقة مع أرقام أسطرها، ولا يفحص كل قواعد مواصفة HTML5 ولا سهولة الوصول.
- الحفظ التلقائي محلي وحسب: المسودة تُحفظ في localStorage على المتصفح الذي تعمل عليه. تغيير الجهاز أو مسح بيانات المتصفح أو التصفح الخاص يعني ضياعها، فصدّر نسختك عند إنهاء عمل مهم.
- اتجاه المحتوى مسؤوليتك: واجهة الأداة متوفرة بالعربية، لكن اتجاه الصفحة التي تبنيها يتحدد بما تكتبه أنت من خاصية dir والأنماط، لا بلغة الواجهة.
- مستند واحد في كل مرة: الأداة مصممة لقطعة HTML واحدة، لا لمشروع متعدد الملفات بروابط ونظام بناء. لبناء هيكل صفحة كاملة من الصفر يفيد مولد كود مصدر الموقع.
- تحويل docx وpdf تقريبي: التحويل عبر الاستيراد السحابي يستخرج النص وبنيته الأساسية، وقد لا ينقل تخطيطات معقدة كما هي.
نصائح لشيفرة أنظف عمليًا
أفضل نتيجة تأتي من ترتيب الخطوات لا من كثرة الأزرار. اتبع هذا التسلسل عند التعامل مع محتوى ملصوق من Word:
- نظّف أولًا ثم نسّق: شغّل تنظيف HTML قبل التنسيق، لأن التنسيق على شيفرة فوضوية يضخّم الناتج دون فائدة.
- احذف الأنماط المضمنة مبكرًا: إزالتها في البداية تكشف ما إذا كانت البنية الدلالية سليمة أصلًا.
- صغّر في النهاية فقط: التصغير خطوة نشر، والعمل على شيفرة مصغّرة يجعل المراجعة شبه مستحيلة.
- تحقق قبل النسخ: ثانية واحدة في التحقق أرخص من ساعة تبحث فيها عن سبب انهيار التخطيط.
- اعرض الشيفرة كنص بأمان: إن كنت تنشر شرحًا يحتوي وسومًا، حوّلها إلى كيانات عبر مُرمّز HTML بدل لصقها كما هي.
أدوات ذات صلة
أكمل سير عملك بأدوات ToolsPivot التالية:
- فك ترميز HTML: يعيد كيانات HTML إلى نص قابل للقراءة والتحرير.
- مصغّر JavaScript: يضغط ملفات السكربت لتقليل وقت التحميل.
- اختبار التوافق مع الجوال: يفحص ظهور صفحتك على الشاشات الصغيرة.
- مولد Schema Markup: ينشئ بيانات منظمة تضيفها إلى شيفرة صفحتك.
- مدقق الفروقات: يبرز الاختلافات بين نسختين من ملف أو نص.
- مولد الأيقونة المفضلة: ينتج أيقونة الموقع بالأحجام المطلوبة للمتصفحات.
- مولد الصور الوهمية: يوفر صورًا بديلة بأبعاد محددة أثناء بناء التخطيط.
- مشفر ومفكك عناوين URL: يعالج الروابط التي تحتوي أحرفًا عربية أو رموزًا خاصة.
- محول الصورة إلى Base64: يحوّل الصور إلى نص مضمّن تدرجه داخل الشيفرة مباشرة.
- مولد نص لوريم إيبسوم: ينتج نصًا بديلًا لملء التخطيط أثناء بناء الصفحة.
الأسئلة الشائعة
ما هو محرر HTML أونلاين؟
هو محرر يعمل في المتصفح ويعرض لوحة مرئية ولوحة شيفرة متزامنتين في الاتجاهين. تكتب في أي منهما فيظهر الأثر في الأخرى فورًا دون تبديل بين وضعين.
هل الأداة مجانية وهل تحتاج حسابًا؟
الأداة مجانية بالكامل ولا تتطلب تسجيلًا أو اشتراكًا. تفتح الصفحة وتبدأ العمل مباشرة.
هل يُرفع ما أكتبه إلى خادم؟
لا، الكتابة والتنظيف والتنسيق والتصدير والتحقق تجري كلها في متصفحك. الاستثناء الوحيد هو الاستيراد من Google Drive أو Dropbox، إذ يمر الملف المختار عبر الخادم لقراءته.
كيف تنظف الأداة اللصق من Word؟
تعترض الأداة محتوى الحافظة قبل وصوله إلى المحرر وتزيل أنماط mso- ووسوم o:p وعناصر span وfont الفارغة والفئات والمعرّفات الشاردة. النتيجة شيفرة تصل نظيفة من البداية بدل تنظيفها لاحقًا.
هل يمكنني تشغيل CSS وJavaScript ورؤية النتيجة؟
لا، اللوحة المرئية تعرض بنية HTML وتنسيقها ولا تشغّل السكربتات. لاختبار سلوك تفاعلي تحتاج فتح الصفحة في متصفح فعلي.
هل تحفظ الأداة عملي تلقائيًا؟
نعم، تُحفظ المسودة تلقائيًا في localStorage وتُستعاد عند عودتك. الحفظ مرتبط بالمتصفح والجهاز، فمسح بيانات المتصفح أو الانتقال لجهاز آخر يعني فقدانها.
ما الذي يكشفه التحقق من الوسوم بالضبط؟
يكشف الوسوم غير المغلقة وغير المتطابقة ويذكر رقم سطر كل منها. يحترم المحلل قواعد الإغلاق الاختياري لوسوم مثل li وtr وtd وp، ويتجاهل script وstyle والتعليقات لتفادي الإنذارات الكاذبة.
هل يمكنني تصدير المحتوى إلى Markdown؟
نعم، زر نسخ MD يحوّل المحتوى إلى Markdown عبر مكتبة Turndown. هذا مفيد لمن ينقل محتوى إلى مستودع أو منصة توثيق.
ما الفرق بين التنسيق والتصغير؟
التنسيق يرتب الشيفرة بمسافات بادئة لتسهيل القراءة، والتصغير يجمعها في سطر واحد لتقليل الحجم. استخدم التنسيق أثناء العمل والتصغير قبل النشر فقط.
هل تدعم الأداة المحتوى العربي واتجاه RTL؟
الواجهة متوفرة بالعربية ضمن ثماني عشرة لغة، وتكتب النص العربي في اللوحتين دون مشكلة. أما اتجاه الصفحة التي تبنيها فيتحدد بخاصية dir والأنماط التي تكتبها أنت، لا بلغة الواجهة.
هل تصلح الأداة لتعديل قالب بلوجر أو ووردبريس؟
تصلح لتحرير قطعة محددة من القالب مثل عنصر أو كتلة، وتفيدك أرقام الأسطر في التحقق. لكنها ليست بديلًا عن محرر القالب الكامل بملفاته المترابطة.
ما الملفات التي يمكنني استيرادها؟
يمكنك رفع ملف محلي من جهازك، ومع المستندات الكاملة تُبقي الأداة محتوى body فقط. عبر Google Drive وDropbox يمكن اختيار ملفات docx وpdf وتحويلها إلى نص، مع العلم أن التحويل يستخرج البنية الأساسية وقد لا ينقل التخطيطات المعقدة حرفيًا.
هل تعمل الأداة على الهاتف؟
تعمل في متصفح الهاتف، لكن العمل الجاد على الشيفرة أسهل على شاشة أكبر. وضع الشيفرة فقط أو ملء الشاشة يحسّن التجربة على الشاشات الضيقة.
متى أستخدم بيئة تطوير مثبتة بدلًا منها؟
عند العمل على مشروع متعدد الملفات بنظام بناء وإدارة إصدارات. الأداة مصممة لمستند HTML واحد يحتاج تحريرًا أو تنظيفًا أو تحققًا سريعًا.
